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"/>