vue 常用代码块

组件懒加载

components: {
    try: () => import(/* webpackChunkName: 'try' */ './try.vue'),
},

路由懒加载

{
        path: '/try',
        name: 'try',
        component: () => import(/* webpackChunkName: 'try' */ '@/components/try.vue'),
},

counTo组件

<CountTo :startVal="0" :endVal="+(item.value)" :duration="3000" class="countTo-block"/>

vm.$watch

window.vm.$watch(
    () => vm.$store.state.currentTheme,
    (newVal, oldVal) => {
        if (newVal !== oldVal) {
            isAnimate = true;
        }
    },
    {
        immediate: true,
    },
)

自定义组件

element input框自动聚焦

<el-input class="input-wrapper"
    v-focus="true"
    ></el-input>

directives: {
    focus: {
        inserted(el, { value }) {
            if (value) {
                const _el = el.getElementsByTagName('input')[0];
                if (_el) {
                    _el.focus();
                }
            }
        },
    },
},

element input框 的 textarea自动聚焦

<el-input
    type="textarea"
    :rows="2"
    v-textAreafocus="true"
></el-input>

directives: {
    textAreafocus: {
        inserted(el, { value }) {
            if (value) {
                const _el = el.getElementsByTagName('textarea')[0];
                if (_el) {
                    _el.focus();
                }
            }
        },
    },
},

eventBus

EventBus.js代码

import Vue from 'vue';

const EventBus = new Vue();
export default EventBus;

调用代码

import EventBus  from 'EventBus';
EventBus.$on('xxx', () => {
})
EventBus.$emit('xxx', () => {
})

问题

‘xx’ is not defined

解决办法：
在根目录底下的.eslintrc.js文件中的globals里面添加变量

vue 父子组件生命周期执行顺序

父组件，beforeCreate
父组件，created
父组件，beforeMount

子组件，beforeCreate
子组件，created
子组件，beforeMount
子组件，mounted

父组件，mounted

父组件，beforeDestroy
子组件，beforeDestroy
子组件，destroyed
父组件，destroyed

update

父组件，beforeUpdate
子组件，beforeUpdate
子组件，updated
父组件，updated

记录：

1、update 生命周期中可以给data中数据赋值，但会造成死循环
2、props 以及 data 里面的数据发生变化会触发 update生命周期
3、watch 没办法监听到全局变量, 会监听到 定义在data中的变量及props中变量 以及store
4、data 为什么是一个函数，data 可以是一个对象，但如果对应组件多次复用的话，data数据始终指向同一个data对象，但data是一个函数的话，他return的对象里面的数据分配了不同的内存地址，各个组件达到data互相不影响
5、watch 和 computed的差别是 watch监听单个值的变化，computed可以监听多个值的变化并返回计算的值