文章已同步至掘金：https://juejin.cn/post/6844904086349807624
欢迎访问😃，有任何问题都可留言评论哦~

watch {#watch}

顾名思义，watch 就是监听的意思，其专门用来观察和响应Vue实例上的数据的变动。

能使用watch属性的场景基本上都可以使用computed属性，而且computed属性开销小，性能高，因此能使用computed就尽量使用computed属性

但是当您想要执行异步或昂贵的操作以响应不断变化的数据 时，这时watch就派上了大用场。

其应用场景一般都是搜索框之类的，需要不断的响应数据的变化

示例：

<!DOCTYPE html>
<html lang="en">

\<head\>
\<meta charset="UTF-8"\>
\<title\>Test\</title\>
\<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"\>\</script\>
\</head\>


\<body\>
\<div id="app"\>
\<input type="text" v-model=content \>
\</div\>


    &lt;script&gt;
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    content:""
                }
            },
            watch:{
                content(){
                    console.log(this.content);
                }
            },

        })
    &lt;/script&gt;




\</body\>

`</html>
`

运行效果：

vue-watch-computed-methods-2

但是如果你有一个搜索按钮，当你点击搜索按钮的时候，才会进行数据的响应和操作的时候，这时候最好使用computed

computed {#computed}

computed 就是计算属性，其可以当成一个data数据来使用。

使用计算属性要注意几点：

computed是在HTML DOM加载后马上执行的，如赋值操作；
计算属性计算时所依赖的属性一定是响应式依赖，否则计算属性不会执行。
计算属性是基于依赖进行缓存的 ，就是说在依赖没有更新的情况，调用计算属性并不会重新计算 ，可以减少开销。所以可以说computed的值在getter执行后是会进行缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算出对应的新值。

其一般应用于比较复杂的渲染数据计算或者不必重新计算数值的情况

示例：

<!DOCTYPE html>
<html lang="en">

\<head\>
\<meta charset="UTF-8"\>
\<title\>Test\</title\>
\<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"\>\</script\>
\</head\>


\<body\>
\<div id="app"\>
{{Name}}
\</div\>


    &lt;script&gt;
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    firstName:"Fan",
                    lastName:"JunYang"
                }
            },
            computed:{
                Name(){
                    return this.firstName + " " + this.lastName
                }
            }

        })
    &lt;/script&gt;




\</body\>

`</html>
`

上面就是一个经典的案例，当你改变了其中一个值的时候，另一个值并不会进行重新计算，从而减少了开销。

methods {#methods}

methods 就是方法。

他没有缓存，他也不像computed在DOM加载后可以自动执行，他必须有一定的触发条件才能执行，如点击事件等；

我们可以将同一函数定义为一个methods或者一个computed。对于最终的结果，两种方式确实是相同的。

但是最大的区别在于：

computed计算属性是基于它们的依赖进行缓存的。如果你进行多次访问的时候（在不改变值的情况下），计算属性会立即返回数据，而不必再次执行函数。并且他还可以自动执行。
而methods只要发生重新渲染，就必定执行该函数，他必须有一定的触发条件才能执行。

示例：

<!DOCTYPE html>
<html lang="en">

\<head\>
\<meta charset="UTF-8"\>
\<title\>Test\</title\>
\<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"\>\</script\>
\</head\>


\<body\>
\<div id="app"\>
\<span\>{{Name1}}\</span\>
\<br /\>
\<span\>{{Name}}\</span\>
\<br /\>
\<button @click='Name2()'\>点我\</button\>
\</div\>


    &lt;script&gt;
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    firstName:"Fan",
                    lastName:"JunYang",
                    Name:""
                }
            },
            computed:{
                Name1(){
                    return this.firstName + " " + this.lastName
                }
            },
            methods:{
                Name2(){
                    return this.Name = this.firstName + " " + this.lastName
                }
            }

        })
    &lt;/script&gt;




\</body\>

`</html>
`

运行效果：

vue-watch-computed-methods-1