Vue基础

1.生命周期钩子函数

beforeCreate获取不到props和data，因为这些数据都初始化在initState中

created可以访问到上面的数据，但是组件还未挂载

beforeMount挂载前开始创建虚拟DOM

mounted将虚拟DOM渲染为真实DOM并渲染数据，有子组件先挂载子组件

beforeUpdate数据更新前调用

updated数据更新后调用

activated和deactivated为keep-alive独有的生命周期，keep-alive包裹的组件在切换时不会被销毁，而是缓存到内存中并执行deactivated函数， 命中缓存渲染后会执行activated函数

beforeDestory移除事件、定时器等，防止内存泄漏

destroyed销毁，有子组件的会先销毁子组件

2. 组件通信

   • 父子组件通信：单向数据流，可使用v-model语法糖实现，因为v-model会默认解析成名为value的prop和名为input的事件，这种方法是典型的双向绑定，但本质上来说，还是通过事件的方法让父组件修改数据。

     此外还有$parent和$children、$listeners和sync，$listeners 属性会将父组件中的 (不含 .native 修饰器的) v-on 事件监听器传递给子组件，子组件可以通过访问 $listeners 来自定义监听器。

     .sync是个语法糖，可以实现简单父子组件通信

     <input :value.sync="value"/>
     // 同以下写法
     <input :value="value" @update:value="v => value = v"><comp>
     <script>
         this.$emit('update: value', 1)
     </script>
     

   • 兄弟组件通信：this.$parent.$children，在$children中通过组件的name查询到组件实例，然后通信。

   • 跨多层级组件通信：provide / inject，文档不推荐直接使用在业务中，用法如下

     假设有父组件A，及跨多层级的子组件B

     export default {
         provide: {
             data: 1
         }
     }
     //子组件
     export default {
         inject: ['data'],
         mounted() {
             console.log(this.data) // 1
         }
     }
     

   • 任意组件间通信：Vuex或Event Bus

3. extend扩展组件生成一个构造器

   let Component = Vue.extend({ //创建组件构造器
       template: '<div>test</div>'
   })
   new Component().$mount('#app') // 挂载到app下
   // 除此之外还可以扩展已有的组件
   let myComponent = Vue.extend(Component)
   new myComponent({
       created() {
           console.log("a")
       }
   })
   new myComponent().$mount('#app')
   

4. mixin和mixins

   mixin用于全局混入，会影响到每个组件实例，例如插件的初始化、封装好的ajax全局混入或工具函数就可以使用mixin，文档不建议使用

   Vue.mixin({
       beforeCreate() {
           //这里会影响到每个组件的beforeCreate钩子函数
       }
   })
   

   mixin适用于多个组件中相同业务逻辑的剥离，如上拉下拉加载数据等逻辑，是最常用的扩展组件的方式。

5. computed和watch

   computed值有缓存，只有值发生变化时才会返回内容，一般适合一些需要依赖别的属性动态获取值的场景。

   watch监听到值变化就会执行回调，适用于需要对监听到值变化后做较复杂逻辑处理的情况。

   两者都支持对象写法：

   vm.$watch('obj', {
       deep: true,
       immeditate: true,
       handler: function(val, oldVal) {
       }
   })
   

6. keep-alive

   作用：保持一些组件的状态防止多次渲染。

7. v-show和v-if

   v-show只是在display: none和display: block之间切换，无论条件是什么都会被渲染出来，后面切换的只是CSS，DOM会一直保留着。v-show在初始渲染时有更高的开销，但是切换时的开销小，适用于频繁切换的场景。

   v-if为false时不会渲染出来，知道为true，切换时会触发销毁/挂载事件，所以切换时开销较大，适合不经常切换的场景。可以在必要的时候才去渲染组件，减少页面渲染开销。

8. data是函数还是对象的问题

   组件复用时所有的组件实例都会共享data，此时如果是对象的话，就会造成一个组件修改data后影响到其他组件，所以组件化时使用的是函数。

   而new Vue()方式，生成的只有一个根组件，不会复用，对象或函数都不影响。