Vue的计算属性computed、方法methods、侦听器watch的区别

骑猪看日落 2022-04-18 04:53 347阅读 0赞

1. **方法总和methods**内的函数如何触发？

**机制：**methods内的函数和普通的函数没有区别。

**触发：**methods内的**函数执行的时候，才能触发；**

**注意：**当页面渲染的时候，也会执行下面代码中的methodsN函数；methods内的函数命名不能与data中的属性重名。

下面实例中的methodsName属性会添加到Vue实例的vm中，和methods一个级别

下面例子中，当点击时执行一次clickme函数：

**触发方式：点击执行**

<div id="demo">
           <button @click="clickme">click me</button>
           <p>{
       {time}}</p>
    </div>
    var vm = new({
        data: {
            time: ''
        },
        methods: {
             clickme(){
              console.log("methods")
               this.time = Date();
             }
        },
     
    })

结果：

![20181112164008643.png][] ![20181112164023164.png][]

2. **计算属性computed**内的函数如何触发？

**机制：\{ \{函数名\}\} <---return <--- 值   **

**触发：**当参与计算的值发生变化的时候，页面中的**\{ \{函数名\}\}**也发生变化，就会触发该函数

**注意：**return 会将函数名 返回到和computed一个级别，这样函数名就是Vue实例vm的属性，所以才能在标签中使用该属性

**有缓存，所以该值不变下的页面渲染不会触发该函数**

3. **侦听器watch内**的函数如何触发？

**机制**：watch内的函数名  ===  data中的属性名

**触发：**data中的属性名对应的值发生改变时，就会触发watch内的函数就执行

**注意：有缓存，所以该值不变下的页面渲染不会触发该函数；但代码复杂**

<div id="demo">
            <div>{
       {methodsN()}}执行methods内的methodsN：{
       {methodsName}}</div>
            <div>触发computed内的computedName：{
       {computedName}} {
       {age}}</div>
            <div>firstName的值：{
       {firstName}}</div>
        </div>
        <script>
            var vm = new Vue({
                el: '#demo', 
                data: {
                    firstName: 'yuzhu',
                    lastName: 'zhu',
                    age: 22
                },
                methods: {
                    //方法执行就会触发，每次页面渲染都会触发函数
                    methodsN: function(){
                        console.log("计算了methods")
                        //this.methodsName 可以通过函数给vm对象添加methodsName属性
                        this.methodsName = this.firstName + this.lastName;
                    }
                },
                computed: {
                    //computed：计算属性，前提是：Vue的html标签中使用computed自定义的方法
                    //同时，要使用return。
                    // {
       {函数名}}  <---return   <--- 值 当值发生变化的时候，{
       {函数名}}对应变化
                    
                    computedName: function(){
                        console.log("计算了computed")
                        return this.firstName + ' ' + this.lastName //computedName属性也添加到vm对象上
                    }
                },
                watch: {
                    //watch：监听的是属性firstName的变化，即watch中的函数名 === data中的属性名
                    //当firstName发生改变时，触发firstName这个函数
                    firstName: function(){
                        console.log("计算了watch")
                    }
                }
            })
        </script>

结果：页面刷新的时候触发了methods中的methodsN 和 computed中的computedName，而watch中的firstName没有触发

原因：

（1）methodsN在标签中执行，每次页面刷新都会执行，每次渲染页面都会触发，哪怕是上述例子中age值的改变，也会重排渲染页面，触发methodsN函数

（2）computedName在页面刷新的时候触发，因为Vue实例vm中本来没有computedName属性，也就是该值为undefined，当页面刷新的时候，该值改变，就会触发computedName函数；而age值的改变不会触发computedName，因为有缓存，只有当computedName值发生改变时，才会触发该函数。

（3）firstName函数没有触发，因为该值没有改变。

二、深入理解computed

内部函数可以写成对象形式，该对象内有get、set方法（系统自带），**为什么还可以直接使用fullName呢？？？**

**get方法直接计算出函数fullName的值，而set方法，可以对fullName进行修改操作**

<div id="demo">{
       {fullName}}</div>
         <script>
             var vm = new Vue({
                 el: '#demo',
                 data: {
                     firstName: 1,
                     lastName: 2,
                 },
                 computed: {
                     fullName: {
                         get: function(){
                             return this.firstName + " " + this.lastName
                         },
                         set: function(value){
                             var arr = value.split(" ");
                             this.firstName = arr[0];
                             this.lastName = arr[1];
                         }
                     }
                 }
             })
         </script>

控制台的操作：

![20181109124803328.png][]

[20181112164008643.png]: https://img-blog.csdnimg.cn/20181112164008643.png
[20181112164023164.png]: /images/20220418/790a26da1d3649d891586a211a764494.png
[20181109124803328.png]: /images/20220418/c632a011f3ce4f36a4a77299c66554cf.png