vue computed计算属性和watch监听事件

以你之姓@ 2022-01-31 05:25 388阅读 0赞

**参考一：**

1、计算属性适用的情形   
我们可能会有这样的需求，一个数据属性在它所依赖的属性发生变化时，也要发生变化，这种情况下，我们最好使用计算属性。   
例如在下面这个例子中，如果我们使用监听函数，代码就会变得有点冗余。

<div id="demo">\{ \{ fullName \}\}</div>

var vm = new Vue(\{  
  el: '\#demo',  
  data: \{  
    firstName: 'Foo',  
    lastName: 'Bar',  
    fullName: 'Foo Bar'  
  \},  
  watch: \{  
    firstName: function (val) \{  
      this.fullName = val + ' ' + this.lastName  
    \},  
    lastName: function (val) \{  
      this.fullName = this.firstName + ' ' + val  
    \}  
  \}  
\})  
fullName属性依赖于firstName和lastName，这里有个缺点就是，无论firstName或lastName其中的任何一个发生改变时，都要调用不同的监听函数来更新fullName属性。但是当我们使用计算属性时，代码就会变得更加简洁。

var vm = new Vue(\{  
  el: '\#demo',  
  data: \{  
    firstName: 'Foo',  
    lastName: 'Bar'  
  \},  
  computed: \{  
    fullName: function () \{  
      return this.firstName + ' ' + this.lastName  
    \}  
  \}  
\})  
这时，我们只要监听fullName属性就行，至于firstName或lastName属性的任何改变，我们都可以通过fullName的getter()方法得到最终的fullName值。   
另外需要注意的是，计算属性可以同时设置getter()、setter()方法。例如：

computed: \{  
  fullName: \{  
    // getter  
    get: function () \{  
      return this.firstName + ' ' + this.lastName  
    \},  
    // setter  
    set: function (newValue) \{  
      var names = newValue.split(' ')  
      this.firstName = names\[0\]  
      this.lastName = names\[names.length - 1\]  
    \}  
  \}  
\}  
2、监听器watch适当的情形

watch函数适用于，当数据发生变化时，执行异步操作或较大开销操作的情况。来看下面的例子：

<div id="watch-example">  
  <p>  
    Ask a yes/no question:  
    <input v-model="question">  
  </p>  
  <p>\{ \{ answer \}\}</p>  
</div>  
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>  
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>  
<script>  
var watchExampleVM = new Vue(\{  
  el: '\#watch-example',  
  data: \{  
    question: '',  
    answer: 'I cannot give you an answer until you ask a question!'  
  \},  
  watch: \{  
    // 如果 \`question\` 发生改变，这个函数就会运行  
    question: function (newQuestion, oldQuestion) \{  
      this.answer = 'Waiting for you to stop typing...'  
      this.getAnswer()  
    \}  
  \},  
  methods: \{  
    // \`\_.debounce\` 是一个通过 Lodash 限制操作频率的函数。  
    // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率  
    // AJAX 请求直到用户输入完毕才会发出。  
      function () \{  
        if (this.question.indexOf('?') === -1) \{  
          this.answer = 'Questions usually contain a question mark. ;-)'  
          return  
        \}  
        this.answer = 'Thinking...'  
        var vm = this  
        axios.get('https://yesno.wtf/api')  
          .then(function (response) \{  
            vm.answer = \_.capitalize(response.data.answer)  
          \})  
          .catch(function (error) \{  
            vm.answer = 'Error! Could not reach the API. ' + error  
          \})  
      \},  
      // 这是我们为判定用户停止输入等待的毫秒数  
      500  
    )  
  \}  
\})  
</script>  
  
在这个例子中，当question数据属性发生改变时，就会调用getAnswer（）方法。该方法被调用后，会执行一个异步请求。最终将得到的结果赋给answer属性。这是计算属性所代替不了的。

**参考二：**

计算属性类似于方法，用于输出数据的计算结果，在数据变化时，它会同步更新，计算属性不可与data中的属性重名。 相对于方法，它的优势是当它的依赖变化时，才会重新进行计算，也就是说它拥有缓存，而方法在每次render的时候都会计算，因此computed的性能较高。

计算属性除了设置为方法外，还可以用作对象，通过get、set方法进行读写操作。

计算属性还可以当做普通属性使用，通过v-model绑定在input上，而方法无法做到。

JavaScript：

let vm = new Vue({
      el: '#app',
      data: {
        a: 12,
        b: 33,
        familyName: '张',
        name: '三'
      },
      computed: {
        sum() {
          return this.a + this.b
        },
        fullName: {
          get() {
            return this.familyName + this.name
          },
          set(value) {
            this.familyName = value[0]
            this.name = value.substring(1)
          },
        }
      },
    })
    复制代码

HTML：

<div id="app">
      <div>
        {
       {a}} + {
       {b}} = {
       {sum}}
        姓：<input type="text" v-model="familyName">
        名：<input type="text" v-model="name">
        姓名：<input type="text" v-model="fullName">
      </div>
    </div>
    复制代码

## Watch监听属性 ##

> 代码示例：/lesson08/02. Watch监听属性.html

Watch监听属性可以监听数据的变化，不止可以监听某个变量，还可以监听对象中的属性，数组中的item。

let vm = new Vue({
      el: '#app',
      data: {
        name: 'lee',
        userInfo: {
          name: 'lee',
          age: 18
        },
        users: [
          'lee',
          'chen',
          'john'
        ]
      },
      watch: {
        name(value) {
          console.log(`name改变为${value}`)
        },
        // userInfo的属性修改不会触发该监听
        userInfo(value) {
          console.log('userInfo已改变', value)
        },
        // 可以监听对象的属性变化
        'userInfo.name': function(value) {
          console.log(`userInfo.name改变为${value}`)
        },
        // 可以监听数组中的某一项
        'users.1': function (value) {
          console.log(`users[1]改变为${value}`)
        },
        // 修改users[1]的值同时也会触发对数组的监听
        users(value) {
          console.log(`users改变为${value}`)
        },
      }
    })
    复制代码

HTML：

**参考三：**

一、计算属性

计算属性关键词： computed。计算属性在处理一些复杂逻辑时是很有用的。

可以看下以下反转字符串的例子：

<div id="app">
      {
      { message.split('').reverse().join('') }}
    </div>
    //模板变的很复杂起来，也不容易看懂理解

使用了计算属性的实例：

<div id="app">
      <p>原始字符串: {
      { message }}</p>
      <p>计算后反转字符串: {
       { reversedMessage }}</p>
    </div>
     
    <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'Runoob!'
      },
      computed: {
        // 计算属性的 getter
        reversedMessage: function () {
          // `this` 指向 vm 实例
          return this.message.split('').reverse().join('')
        }
      }
    })
    </script>

实例中声明了一个计算属性 reversedMessage 。提供的函数将用作属性 vm.reversedMessage 的 getter 。vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。

1、computed vs methods

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

methods: {
      reversedMessage2: function () {
        return this.message.split('').reverse().join('')
      }
    }
    
    {
      {reversedMessage2()}}

可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

此外，computed 对象内的方法如果在初始化时绑定到元素上的事件会先执行一次这个方法 ，而 methods 内的方法则不会。

2、computed setter

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

<div id="app">
      <p>{
      { site }}</p>
    </div>
    
    <script>
    var vm = new Vue({
      el: '#app',
      data: {
        name: 'Google',
        url: 'http://www.google.com'
      },
      computed: {
        site: {
          // getter
          get: function () {
            return this.name + ' ' + this.url
          },
          // setter
          set: function (newValue) {
            var names = newValue.split(' ')
            this.name = names[0]
            this.url = names[names.length - 1]
          }
        }
      }
    })
    // 调用 setter， vm.name 和 vm.url 也会被对应更新
    vm.site = '测试计算属性 setter';
    document.write('name: ' + vm.name);
    document.write('<br>');
    document.write('url: ' + vm.url);
    </script>

结果显示的就不是默认的name和url值，而不是 vm.site 的 setter 的值。

**setter 会被调用， vm.name 和 vm.url 也会被对应更新。**

二、监听属性

监听属性 watch，我们可以通过 watch 来响应数据的变化。

<div id = "computed_props">
        千米 : <input type = "text" v-model = "kilometers">
        米 : <input type = "text" v-model = "meters">
    </div>
    <p id="info"></p>
    <script type = "text/javascript">
        var vm = new Vue({
        el: '#computed_props',
        data: {
            kilometers : 0,
            meters:0
        },
        methods: {
        },
        computed :{
        },
        watch : {
            kilometers:function(val) {
                this.kilometers = val;
                this.meters = val * 1000;
            },
            meters : function (val) {
                this.kilometers = val/ 1000;
                this.meters = val;
            }
        }
        });
        // $watch 是一个实例方法
        vm.$watch('kilometers', function (newValue, oldValue) {
        // 这个回调将在 vm.kilometers 改变后调用
        document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
    })
    </script>

以上代码中我们创建了两个输入框，data 属性中， kilometers 和 meters 初始值都为 0。

watch 对象创建了两个方法 kilometers 和 meters。

当我们再输入框输入数据时，watch 会实时监听数据变化并改变自身的值

**参考四：**

假设有如下代码：

<div>
          <p>FullName: {
       {fullName}}</p>
          <p>FirstName: <input type="text" v-model="firstName"></p>
    </div>
    
    new Vue({
      el: '#root',
      data: {
        firstName: 'Dawei',
        lastName: 'Lou',
        fullName: ''
      },
      watch: {
        firstName(newName, oldName) {
          this.fullName = newName + ' ' + this.lastName;
        }
      } 
    })
    复制代码

上面的代码的效果是，当我们输入`firstName`后，`wacth`监听每次修改变化的新值，然后计算输出`fullName`。

## handler方法和immediate属性 ##

这里 watch 的一个特点是，最初绑定的时候是不会执行的，要等到 `firstName` 改变时才执行监听计算。那我们想要一开始就让他最初绑定的时候就执行改怎么办呢？我们需要修改一下我们的 watch 写法，修改过后的 watch 代码如下：

watch: {
      firstName: {
        handler(newName, oldName) {
          this.fullName = newName + ' ' + this.lastName;
        },
        // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
        immediate: true
      }
    }
    复制代码

注意到`handler`了吗，我们给 firstName 绑定了一个`handler`方法，之前我们写的 watch 方法其实默认写的就是这个`handler`，Vue.js会去处理这个逻辑，最终编译出来其实就是这个`handler`。

而`immediate:true`代表如果在 wacth 里声明了 firstName 之后，就会立即先去执行里面的handler方法，如果为 `false`就跟我们以前的效果一样，不会在绑定的时候就执行。

## deep属性 ##

watch 里面还有一个属性 `deep`，默认值是 `false`，代表是否深度监听，比如我们 data 里有一个`obj`属性：

<div>
          <p>obj.a: {
       {obj.a}}</p>
          <p>obj.a: <input type="text" v-model="obj.a"></p>
    </div>
    
    new Vue({
      el: '#root',
      data: {
        obj: {
          a: 123
        }
      },
      watch: {
        obj: {
          handler(newName, oldName) {
             console.log('obj.a changed');
          },
          immediate: true
        }
      } 
    })
    复制代码

当我们在在输入框中输入数据视图改变`obj.a`的值时，我们发现是无效的。受现代 JavaScript 的限制 (以及废弃 `Object.observe`)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 `getter/setter` 转化过程，所以属性必须在 `data` 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

默认情况下 handler 只监听`obj`这个属性它的引用的变化，我们只有给`obj`赋值的时候它才会监听到，比如我们在 mounted事件钩子函数中对`obj`进行重新赋值：

mounted: {
      this.obj = {
        a: '456'
      }
    }
    复制代码

这样我们的 handler 才会执行，打印`obj.a changed`。

相反，如果我们需要监听`obj`里的属性`a`的值呢？这时候`deep`属性就派上用场了！

watch: {
      obj: {
        handler(newName, oldName) {
          console.log('obj.a changed');
        },
        immediate: true,
        deep: true
      }
    } 
    复制代码

`deep`的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改`obj`里面任何一个属性都会触发这个监听器里的 handler。

优化，我们可以是使用字符串形式监听。

watch: {
      'obj.a': {
        handler(newName, oldName) {
          console.log('obj.a changed');
        },
        immediate: true,
        // deep: true
      }
    } 
    复制代码

这样Vue.js才会一层一层解析下去，直到遇到属性`a`，然后才给`a`设置监听函数。

## 注销watch ##

为什么要注销 `watch`？因为我们的组件是经常要被销毁的，比如我们跳一个路由，从一个页面跳到另外一个页面，那么原来的页面的 watch 其实就没用了，这时候我们应该注销掉原来页面的 watch 的，不然的话可能会导致内置溢出。好在我们平时 watch 都是写在组件的选项中的，他会随着组件的销毁而销毁。

const app = new Vue({
      template: '<div id="root">{
       {text}}</div>',
      data: {
        text: 0
      },
      watch: {
        text(newVal, oldVal){
          console.log(`${newVal} : ${oldVal}`);
        }
      }
    });
    复制代码

但是，如果我们使用下面这样的方式写 watch，那么就要手动注销了，这种注销其实也很简单

const unWatch = app.$watch('text', (newVal, oldVal) => {
      console.log(`${newVal} : ${oldVal}`);
    })
    
    unWatch(); // 手动注销watch
    复制代码

`app.$watch`调用后会返回一个值，就是`unWatch`方法，你要注销 watch 只要调用`unWatch`方法就可以了。

链接：[https://blog.dunizb.com/2018/04/28/Vue-js-watch-Advanced-Usage/][https_blog.dunizb.com_2018_04_28_Vue-js-watch-Advanced-Usage]

**参考五：**

**一.计算属性（computed）**

<template>
      <div class="box">
        <h1>计算属性</h1>
        <hr>
        
        <p><input type="text" v-model="message"></p>
        
        <p>{
      {message.toUpperCase()}}</p>
        
        <p>{
      {computedMessage}}</p>
        <hr>
        
        <span>{
      {message}}</span><button @click="changeMessage()">点击改变</button>
        <hr>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          message: 'Hello world!',
          passw2: 'sss',
        }
      },
      // computed属性是return返回值，在使用的时候只使用函数名不是调用函数
      computed:{
        computedMessage(){
          return this.message.split('')
        }
      },
      methods:{
        changeMessage(){
          this.message = this.computedMessage+'altman'
        }
      },
    }
    </script>

这里需要注意的是computed中的函数名不能和所操作data中的数据一样；computed中的函数名相当于是操作data数据后的新数据，在模块中直接使用这个函数名即可实现对data中数据改变的渲染。

**二.监听器（watch）**

首先确认 watch是一个对象，一定要当成对象来用。

对象就有键，有值。

第一种 键：就是你要监听的那个数据，比如说$route，这个就是要监控路由的变化。或者是data中的某个变量。

值可以是函数：就是当你监控的家伙变化时，需要执行的函数，这个函数有两个形参，第一个是改变后的新值，第二个是改变之前的值。

第二种  值也可以是函数名：不过这个函数名要用单引号来包裹。(不常用)

第三种情况厉害了(监听的那个数据值是一个对象):

值是包括选项的对象：选项包括有三个。

*      第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。
 *      第二个是deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）
 *      第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。

用法一：基础用法

<template>
      <div class="box">
        <h1>监听器</h1>
        <label>二次密码:</label>
        <input v-model="watchMsg" />
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          message: 'Hello world!',
          watchMsg: '我是监听操作',
        }
      },
      watch:{
        watchMsg(newVal,oldVal){
          console.log('newVal:'+newVal,'oldVal:'+oldVal);
        },
      }
    }
    </script>

用法二：handler方法和immediate属性

<template>
      <div class="box">
        <h1>监听器</h1>
        <label>二次密码:</label>
        <input v-model="watchMsg" />
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          message: 'Hello world!',
          watchMsg: '我是监听操作',
        }
      },
      watch:{
        watchMsg: {
          handler(newVal,oldVal){
            console.log('newVal:'+newVal,'oldVal:'+oldVal);
          },
          immediate:true,
        }
      }
    }
    </script>

注意到handler了吗，我们给 watchMsg绑定了一个handler方法，之前我们写的 watch 方法其实默认写的就是这个handler，Vue.js会去处理这个逻辑，最终编译出来其实就是这个handler。

而immediate:true代表如果在 wacth 里声明了watchMsg之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。

用法三：

**deep属性**

watch 里面还有一个属性 deep，默认值是 false，代表是否深度监听，比如我们 data 里有一个obj属性/数组：

<template>
      <div class="box">
        <h1>监听器</h1>
        <label>二次密码:</label>
        <input v-model="obj.watchMsg" />
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          message: 'Hello world!',
          obj:{
            watchMsg: '我是监听操作',
          }
        }
      },
      watch:{
        // 需要注意的是这里的监听对象也需要变化
        'obj.watchMsg': {
          handler(newVal,oldVal){
            console.log('newVal:'+newVal,'oldVal:'+oldVal);
          },
          immediate:true,
          deep:true,
        }
      }
    }
    </script>

2、数组的watch

<template>
      <div class="box">
        <h1>监听器</h1>
        <p>{
      {array}}</p>
        <button @click='addArray()'>点击改变数组</button>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          message: 'Hello world!',
          array:['mu','zi','dig','big']
        }
      },
      watch:{
        // 需要注意的是这里所监听的对象应该是数组
        array:{
          handler(newVal,oldVal){
            console.log(newVal+'--'+oldVal)
          },
          deep:true,
          immediate:true,
        }
      },
      methods:{
        addArray() {
          this.array.push('66')
        }
      }
    }
    </script>

3、数组中对象的watch

<template>
      <div class="box">
        <h1>监听器</h1>
        <ul>
          <li v-for="(item,index) in arrayObj" :key="item.id">{
      {index}}--{
      {item.name}}---<input type="text" v-model="item.age" @keydown="change(index)"></li>
        </ul>
        <hr>
        <ul>
          <li v-for="(item,index) in arrayObj" :key="item.id">{
      {index}}--{
      {item.name}}---{
      {item.age}}</li>
        </ul>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          arrayObj:[
            {name:'张三',age:'23'},
            {name:'李四',age:'22'}
          ],
        }
      },
      watch:{
        // 需要注意的是这里所监听的对象应该是数组
        arrayObj:{
          handler(newVal,oldVal){
            console.log(newVal+'--'+oldVal)
          },
          deep:true,
          immediate:true,
        }
      },
      methods:{
        change(i) {
          // console.log(this.changeValue)
          this.arrayObj[i].age = this.arrayObj[i].age
        }
      }
    }
    </script>

4、对象具体属性的watch［活用computed］

<template>
      <div class="box">
        <h1>监听器</h1>
        <p>{
      {obj.name}}</p>
        <input type="text" v-model="obj.name" name="" id="">
        <p>{
      {newName}}</p>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          obj:{name:'muzi',age:'23'},
        }
      },
      computed:{
        newName(){
          return this.obj.name.toUpperCase();
        }
      },
      watch:{
        newName(newVal,oldVal){
          console.log(newVal+'--'+oldVal)
        },
        // newName:{
        //   handler(newVal,oldVal){
        //     console.log(newVal+'--'+oldVal)
        //   },
        //   deep:true,
        //   immediate:true,
        // }
      },
    }
    </script>

[https_blog.dunizb.com_2018_04_28_Vue-js-watch-Advanced-Usage]: https://blog.dunizb.com/2018/04/28/Vue-js-watch-Advanced-Usage/