Vue中watch、computed与methods的联系和区别

时间 2019-11-17

标签 vue watch computed methods 联系区别繁體版

原文原文链接

watch

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

能使用watch属性的场景基本上均可以使用computed属性，并且computed属性开销小，性能高，所以能使用computed就尽可能使用computed属性vue

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

其应用场景通常都是搜索框之类的，须要不断的响应数据的变化npm

示例：缓存

<!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>

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

        })
    </script>
</body>

</html>
复制代码

运行效果：bash

可是若是你有一个搜索按钮，当你点击搜索按钮的时候，才会进行数据的响应和操做的时候，这时候最好使用computedapp

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>

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

        })
    </script>
</body>

</html>
复制代码

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

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>

    <script>
        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
                }
            }

        })
    </script>
</body>

</html>
复制代码

运行效果：

Vue中watch、computed与methods的联系和区别

watch

computed

methods

Q_Q