vue的一些小知识点

1、MVVM层
M层：数据层
V层：视图层
VM层：Vue（监听数据改变并作出映射）

2、如果要触发原生的绑定事件而不是自定义事件，只需要加上修饰符.native，如： @click.native="testFun"

3、watch和computed计算属性有缓存，数据没更改时从缓存中直接调用结果

4、v-if 和 v-show的区别
v-show会渲染到页面上，只是改变display的值，v-if为false时直接不渲染不在DOM中。
v-if和v-else-if、v-else 一起出现时必须紧接着写

5、key值
Vue会尝试复用页面上已经存在的DOM标签，加上key值可以告诉vue页面上的标签是唯一的，不会复用页面上的标签。
v-for的:key值尽量不要用自己的index值，可以使用数据的唯一值如item.id，此时性能较高。

6、不能根据数组下标的方式来添加数组，数据会被改变，但页面不会响应同步更新。
（1）可以使用数组的push、pop、shift、unshift、splice、sort和reverse方法来对数组进行修改更新。
（2）通过改变数组的引用
（3）Vue.set方法：vm.set(target, key, value) Vue.set(vm.info, "address","beijing"); 相当于：vm.set(vm.info, "address","beijing");

7、template模板占位符
如:

<template v-for="(item, index) in list" :key="item.id">
    <div>{{item.text}}</div>
    <span>{{item.id}}</span>
</template>

渲染后template标签不会在文档中出现，又可以保证里面的内容不用写多个v-for

8、在根组件的data可以是个对象，但在子组件中必须是一个函数，需要return返回对象。

9、is特殊属性

 <div id="root">
    <table>
      <tbody>
        <tr is="row"></tr>
        <tr is="row"></tr>
      </tbody>
    </table>
  </div>

    Vue.component('row', {
      template: '<tr><td>this is a row</td></tr>'
    });

在使用table时，<tbody>里的标签必须为tr，否则会出bug，若tr以组件的形式引入，必须使用is标签，指明该组件指向的是row组件。相似的ul、select标签也可能出现这样的bug。

10、子组件接收到父组件传过来的参数后，不能直接对参数进行修改（单向数据流）。需要修改时可以将传入的参数赋值给一个定义的变量，通过
改变变量来实现。

11、对于过渡动画，可以通过 appear 特性设置节点在初始渲染的过渡：

<transition
  appear
  appear-class="custom-appear-class"
  appear-to-class="custom-appear-to-class" (2.1.8+)
  appear-active-class="custom-appear-active-class"
>
  <!-- ... -->
</transition>

12、对于@keyframe和transition动画同时使用时过渡时长不一致时，可以设置type属性和duration。type="transition"则以transition的时长为准。设置:duration="1000"或者:duration={enter: 3000, leave: 5000}则是自定义动画时长