Vue.js 知识点

计算属性computed

计算属性computed,其实是该属性的getter函数，计算属性只有在它的相关依赖改变的时候才会重新计算，否则就会缓存起来，避免了重复使用的时候函数执行，优化性能。
同样，计算属性也有setter函数，我们可以在计算属性重新赋值的时候通过setter函数执行一些语句。
与watcher比较：watcher通过对所有 的依赖都需要写watcher函数，进行监听，如果某一个依赖发生改变，再进行改变，而且，每次都会执行函数，不利于我们的性能。而computed则不同，它会将计算结果进行缓存，每次调用都会调用这个缓存的结果，而不必执行函数，只有在相关依赖改变的情况下，才会执行函数，而且它可以对多个依赖起作用，这点要优于watcher函数。

new Vue({    el:'#app',    data:{        firstName:'John',        lastName:'Wade',        fullName:'John Wade'    },    watch:{        //watcher函数        firstName:(n) => {            this.fullName = n + ' ' + this.lastName        },        lastName:(n) => {            this.fullName = this.firstName + ' ' + n        }    },    computed:{        //计算属性computed        fullName:() => {            return this.firstName + ' ' + this.lastName        }    }})//是否computed优于watcher函数呢？

template包装元素

Vue中可以使用template包装元素来将一些分离的元素包在一起，在最终渲染元素时，并不会包括template元素，这样可以避免没有根节点的问题！
PS:v-if v-for都可以使用template元素，v-show不支持template元素。

    <template v-if="isNessery">        <h1>Hello</h1>        <h2>Welcome to China!</h2>    </template>

使用Key值来管理可复用的元素

通常情况下，Vue为尽可能高效的渲染元素，会使用已有的重复元素。这样会出现一个问题，如果两个input的使用，已经在其中一个里面输入一些内容，那么当需要显示第二个时，通常会重复使用第一个，这样输入的内容不会被清除，这样就不符合需求，这种情况下，我们在相同的元素上加上不同的key值，就不会出现这个问题了，基本上这个问题大部分会出现在input上，其他不需要输入的元素应该没有问题。
另外：v-if,v-else-if,v-else这些条件必须紧跟在一起，否则不起作用！
v-show不支持template元素
v-if与v-show:v-if有更高的切换开销，v-show有更高的渲染开销，一般情况下，如果元素需要频繁的切换，使用v-show比较好，如果运行时条件不太可能改变，那么就使用v-if!

    <template v-if="isActive">        <label>Template 1</label>        <input type="text" key="temp-1"/>    </template>    <template v-else>        <label>Template 2</label>        <input type="text" key="temp-2"/>    </template>    //其中input添加了唯一的key值，每次都会被重新加载    //而label元素会被高效的重复使用，只改变里面的内容，不需要key值

变异数组

Vue.js包含一些数组变异方法，也会触发视图更新：

push()pop()shift()unshift()splice()sort()reverse()

变异方法意思就是会改变原数组的方法，也有非变异方法，它们是返回一个全新的数组。如：filter(),concat(),slice()等。
Vue实现了一些方式最大的重复使用已有DOM元素。

事件修饰符

.stop //阻止事件冒泡.prevent //阻止重载页面.capture //捕获.self //元素本身.once //只执行一次//键名修饰符@keyup.enter.tab.delete.space.esc...

表单控件绑定

可以将checkbox绑定到一个数组上

<input type="checkbox" value="a" v-model="arrs"/><input type="checkbox" value="b" v-model="arrs"/><input type="checkbox" value="c" v-model="arrs"/>