Vue - 随笔

组件导入
Vue Router
- 定义 Router
- 使用 Router
Vuex

update 2021-02

组件导入

发现一个比较有趣的事情，导入组件第一个想到的肯定是import，这里还就不一样了，如果直接import是木有任何作用的。

Setup 导入

<script setup>
  import H2 from './HelloWorld2.vue';
</script>

import H2 from './HelloWorld2.vue';
setup() {
    return { H2 }
}

Component 注册

import H2 from './HelloWorld2.vue';
components: {
    H2
}

App Component 注册

前两种是当前组件可用，这里是全局注册

import H2 from './components/HelloWorld2.vue';
app.component("H2", H2)

导入后也有一个有趣的事情，它会自动把驼峰命名转为中划线分割，比如CourseList可以分别使用<CourseList />以及<course-list />

Vue Router

定义 Router

import { createRouter, createWebHistory } from 'vue-router';

import CourseList from './components/CourseList.vue';
import CourseDetail from './components/CourseDetail.vue';
import CourseDetailExtend from './components/CourseDetailExtend.vue';
import CourseDetailExtend2 from './components/CourseDetailExtend2.vue';
import TeacherList from './components/TeacherList.vue';

const routes = [
    { path: '/courses', component: CourseList },
    { path: '/courses/:id', component: CourseDetail, children: [
        { path: 'extend', component: CourseDetailExtend },
    ]},
    { path: '/courses/:id/extend2', component: CourseDetailExtend2 },
    { path: '/teachers', component: TeacherList },
    { path: '/:pathMatch(.*)*', redirect: to => {
        return { path: '/courses' }
    }},
];

const router = createRouter({
    history: createWebHistory(),
    routes
})
app.use(router)

使用 Router

<router-link to='/courses'>Course</router-link>
<router-link to='/teachers'>Teacher</router-link>

<router-view />

Vuex

定义 Store

vuex 中的 mutations 类似于 redux 的 reducer，整体看起来跟dva很相似，同步变更放在mutations，异步放在actions里面

import { createStore } from 'vuex'

const courseStore  = {
    state: () => ({
        courseList: [],
        courseTotal: 0,
    }),
    mutations: {
        onGetCourseList(state, payload) {
            const { list, total } = payload;
            state.courseList = list;
            state.courseTotal = total;
        }
    },
    actions: {
        async GetCourseList({ commit }, payload) {
            const { limit, offset } = payload;
            let list = [1,312,31,Math.random()];
            let total = list.length;
            commit('onGetCourseList', { list, total })
        }
    }
}

注册 Store

当然注册也是不可避免的

const store = createStore({
    modules: {
        course: CourseStore
    }
})
app.use(store)

使用 Store

vue文件中使用如下

computed: mapState({
    courseList: state=>state.course.courseList,
    courseTotal: state=>state.course.courseTotal,
}),
created() {
    this.$store.dispatch('GetCourseList', { limit: 10, offset: 0 })
}

create 2019-03

闲来无事，瞧瞧这个东西，最早使用这个当做template使用，后来便使用了React。其实最开始用的是Angularjs，大概是1.5版本，是有一个页面特别复杂，然后数据也是从别的地方抓来的，毕竟是外包项目，所以直接上了Angularjs。

new Vue({
  router,
  store,
  render: h => h(MainLayout),
}).$mount('#app')

Vue绑定方式模仿了Angular，大概就是<li v-for="item in list">{{item.name}}</li>，所以我喜欢称之为模板增强型语言。然后脚本里也有一些比较奇怪的地方，比如用字符串来声明来实现自父组件的值，而不是通过注入。

props:['id']

还有子组件调用父组件方法，更像是订阅式的

// 父组件订阅 childEvent 到 receiveChild 事件中
v-on:childEvent="receiveChild"
// 子组件触发 childEvent 
this.$emit("childEvent","xxx");

还有computed，一个有趣的东西，文档说只会在被计算的变量变化时才会重新计算。

<div>sum -> {{sum}}</div>
computed: {
    sum: function() {
        return this.a + this.b;
    }
}

提到计算属性，它还有watch，这个也是从angularjs模仿过来的，它监听的就是data里面的属性啦

watch: {
    a: function(val) {
        return this.dataSum = this.a + this.b;
    },
    b: function(val) {
        return this.dataSum = this.a + this.b;
    }
}

还有诸如components, Vue.use也是挺烦的，所有用到的组件都要放到components列表里，如果想全局生效也可以使用Vue.use，使用antd时，还要把每个组件use一下。

其它的还有Vuex的一些东西就不细谈了，this.$store.state.xxx, this.$store.commit('xxx')

总的来讲，整个架构和React有很大的思想差异，具体差异就恕在下无此文采来评论了。