VUE的小知识汇总

一：watch和computed的区别

computed(计算属性)-watch(监听)

computed看上去是方法，但是实际上是计算属性，该属性用来计算出一个值(就是你所依赖的数据动态显示的计算结果，该计算结果会被缓存)。commputed的值在getter执行后是会缓存的，只有在它以来的属性值改变之后，下一次获取computed的值才会重新调用相应的getter来计算。

该值在调用的时候不需要加括号，可以作为属性直接使用。二是根据依赖自动缓存，如果依赖不变那么computed的值不会发生变化

watch用来监听data的数据回调，当依赖的data的数据发生变化时执行回调。在方法中传入newVal和oldVal，可以提供输入值无效，提供中间值的场景。Vue实例会在实例化时调用$watch(),遍历watch对象的每一个属性。

watch有两个选项：immeditate表示是否在第一次渲染的时候执行该函数，第二个选项是deep,deep的作用是在渲染的时候是否去监听属性的变化。

总结: 1:如果一个数据依赖于其他数据，那么就把这个数据设计为computed的
2:如果需要在某个数据变化时做一些事情，使用watch来观察这个数据变化

二：VUE中的.sync修饰符究竟有什么用

在VUE中有三个规则：

• 组件不能修改props外部数据
• $emit可以触发时间，并传递参数
• emit的参数

我们以代码为例：

<div id="app">
    <div>{{bar}}</div>
    <my-comp :foo.sync="bar"></my-comp>
    // <my-comp :foo="bar" @update:foo="val => bar = val"></my-comp> 这一句和上面那一句是等价的
</div>
<script>
    Vue.component('my-comp', {
        template: '<div @click="increment">点我+1</div>',
        data: function() {
            return {copyFoo: this.foo}
        },
        props: ['foo'],
        methods: {
            increment: function() {
                this.$emit('update:foo', ++this.copyFoo);
            }
        }
    });
    new Vue({
        el: '#app',
        data: {bar: 0}
    });
</script>

vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。如果我们不用.sync，我们想做上面的那个弹窗功能，我们也可以props传初始值，然后事件监听，实现起来也不算复杂。这里用sync实现，只是给大家提供一个思路，让其明白他的实现原理，可能有其它复杂的功能适用sync。