Vue学习笔记

1.计算属性computed与监听属性watch的区别

   1>计算属性是依赖的属性值改变后，将计算属性的返回值作为最新结果，所以，里面不能异步的返回结果，不可以写异步逻辑。

   2>监听属性是监听的值改变后会重新执行函数，将一个值重新赋值作为返回结果，可以写异步逻辑。

    示例如下：

    

        

          {{msg}}

        

        

          {{newValue}}

        

        点击

      

      

结果：

watch属性监听

        let vm = new Vue({          el: '#app',          data: {            msg: 'hello',            temp: ''          },          computed: {            newValue () {              if (this.temp) {                // 不能写异步                // setTimeout(() => {                //   return msg                // }, 1000);                return this.msg              } else {                return this.temp              }            }          },          methods: {            handleClick () {              this.msg = 'hello1'              this.temp = 'hello1'            }          }        })               let vm = new Vue({          el: '#app',          data: {            msg: 'hello',            temp: ''          },          computed: {            newValue () {              if (this.temp) {                // 不能写异步                // setTimeout(() => {                //   return msg                // }, 1000);                return this.msg              } else {                return this.temp              }            }          },          methods: {            handleClick () {              this.msg = 'hello1'              this.temp = 'hello1'            }          }        })               let vm = new Vue({          el: '#app',          data: {            msg: 'hello',            temp: ''          },          computed: {            newValue () {              if (this.temp) {                // 不能写异步                // setTimeout(() => {                //   return msg                // }, 1000);                return this.msg              } else {                return this.temp              }            }          },          methods: {            handleClick () {              this.msg = 'hello1'              this.temp = 'hello1'            }          }        })       

输出结果是一样的，但是不支持一秒后输出。

2.计算属性computed与methods方法的区别

    1>计算属性是基于所依赖的数据是否更新，如果相关的响应式依赖有改变才会更新，而方法是每次都会执行。

    2>计算属性是存在缓存的，如果数据没有发生改变，每次取值都是从缓存里取值。

    示例如下：

    

    点击执行fun1

    

    打印结果为：

methods方法打印结果

computed属性打印结果

3.计算属性与数据存储data属性的区别

计算属性也是对数据进行存储的，调用方式是一样的，例如

data中的数据：{{num}}

computed中的数据：{{getNum}}

注意：计算属性是对数据进行业务逻辑的处理，也可以对计算属性中的数据进行监听。