Vue.js 的watch属性的使用和computed计算属性的使用

Love The Way You Lie 2022-03-16 01:42 254阅读 0赞

### 文章目录 ###

*   *  \`watch\`属性的使用
     *  \`computed\`计算属性的使用
     *  \`watch\`、\`computed\`和\`methods\`之间的对比

## `watch`属性的使用 ##

考虑一个问题：想要实现 `名` 和 `姓` 两个文本框的内容改变，则全名的文本框中的值也跟着改变；（用以前的知识如何实现？？？）

用以前的知识如何实现？？？

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70]

用watch属性实现：

1.  监听`data`中属性的改变：

<div id="app">
        <input type="text" v-model="firstName"> +
        <input type="text" v-model="lastName"> =
        <span>{
       {fullName}}</span>
      </div>
    
      <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            firstName: 'jack',
            lastName: 'chen',
            fullName: 'jack - chen'
          },
          methods: {},
          watch: {
            'firstName': function (newVal, oldVal) { // 第一个参数是新数据，第二个参数是旧数据
              this.fullName = newVal + ' - ' + this.lastName;
            },
            'lastName': function (newVal, oldVal) {
              this.fullName = this.firstName + ' - ' + newVal;
            }
          }
        });
      </script>

代码：

![在这里插入图片描述][20190225214926430.png]

1.  监听路由对象的改变：

<div id="app">
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
    
        <router-view></router-view>
      </div>
    
      <script>
        var login = Vue.extend({
          template: '<h1>登录组件</h1>'
        });
    
        var register = Vue.extend({
          template: '<h1>注册组件</h1>'
        });
    
        var router = new VueRouter({
          routes: [
            { path: "/login", component: login },
            { path: "/register", component: register }
          ]
        });
    
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {},
          methods: {},
          router: router,
          watch: {
            '$route': function (newVal, oldVal) {
              if (newVal.path === '/login') {
                console.log('这是登录组件');
              }
            }
          }
        });
      </script>

代码：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./lib/vue-2.4.0.js"></script>
      
      <script src="./lib/vue-router-3.0.1.js"></script>
    </head>
    
    <body>
      <div id="app">
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
    
        
        <router-view></router-view>
    
      </div>
    
      <script>
        // 2. 创建子组件
        var login = {
          template: '<h3>这是登录子组件，这个组件是 奔波霸 开发的。</h3>'
        }
    
        var register = {
          template: '<h3>这是注册子组件，这个组件是 霸波奔 开发的。</h3>'
        }
    
        // 3. 创建一个路由对象
        var router = new VueRouter({
          routes: [ // 路由规则数组
            { path: '/', redirect: '/login' },
            { path: '/login', component: login },
            { path: '/register', component: register }
          ],
          linkActiveClass: 'myactive' // 和激活相关的类
        })
    
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {},
          methods: {},
          // router: router
          router,
          watch: {
            //  this.$route.path
            '$route.path': function (newVal, oldVal) {
              // console.log(newVal + ' --- ' + oldVal)
              if (newVal === '/login') {
                console.log('欢迎进入登录页面')
              } else if (newVal === '/register') {
                console.log('欢迎进入注册页面')
              }
            }
          }
        });
      </script>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 1]

## `computed`计算属性的使用 ##

1.  默认只有`getter`的计算属性：

<div id="app">
        <input type="text" v-model="firstName"> +
        <input type="text" v-model="lastName"> =
        <span>{
       {fullName}}</span>
      </div>
    
      <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            firstName: 'jack',
            lastName: 'chen'
          },
          methods: {},
          computed: { // 计算属性； 特点：当计算属性中所以来的任何一个 data 属性改变之后，都会重新触发 本计算属性 的重新计算，从而更新 fullName 的值
            fullName() {
              return this.firstName + ' - ' + this.lastName;
            }
          }
        });
      </script>

1.  定义有`getter`和`setter`的计算属性：

<div id="app">
        <input type="text" v-model="firstName">
        <input type="text" v-model="lastName">
        
        <input type="button" value="修改fullName" @click="changeName">
    
        <span>{
       {fullName}}</span>
      </div>
    
      <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            firstName: 'jack',
            lastName: 'chen'
          },
          methods: {
            changeName() {
              this.fullName = 'TOM - chen2';
            }
          },
          computed: {
            fullName: {
              get: function () {
                return this.firstName + ' - ' + this.lastName;
              },
              set: function (newVal) {
                var parts = newVal.split(' - ');
                this.firstName = parts[0];
                this.lastName = parts[1];
              }
            }
          }
        });
      </script>

代码：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./lib/vue-2.4.0.js"></script>
    </head>
    
    <body>
      <div id="app">
    
        <input type="text" v-model="firstname"> +
        <input type="text" v-model="middlename"> +
        <input type="text" v-model="lastname"> =
        <input type="text" v-model="fullname">
    
        <p>{
       { fullname }}</p>
        <p>{
       { fullname }}</p>
        <p>{
       { fullname }}</p>
    
      </div>
    
      <script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            firstname: '',
            lastname: '',
            middlename: ''
          },
          methods: {},
          computed: { // 在 computed 中，可以定义一些 属性，这些属性，叫做 【计算属性】， 计算属性的，本质，就是 一个方法，只不过，我们在使用 这些计算属性的时候，是把 它们的 名称，直接当作 属性来使用的；并不会把 计算属性，当作方法去调用；
    
            // 注意1： 计算属性，在引用的时候，一定不要加 () 去调用，直接把它 当作 普通 属性去使用就好了；
            // 注意2： 只要 计算属性，这个 function 内部，所用到的 任何 data 中的数据发送了变化，就会 立即重新计算 这个 计算属性的值
            // 注意3： 计算属性的求值结果，会被缓存起来，方便下次直接使用； 如果 计算属性方法中，所以来的任何数据，都没有发生过变化，则，不会重新对 计算属性求值；
            'fullname': function () {
              console.log('ok')
              return this.firstname + '-' + this.middlename + '-' + this.lastname
            }
          }
        });
      </script>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 2]

## `watch`、`computed`和`methods`之间的对比 ##

1.  `computed`属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
2.  `methods`方法表示一个具体的操作，主要书写业务逻辑；
3.  `watch`一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是`computed`和`methods`的结合体；

[源代码地址][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70]: /images/20220316/44efbb51b290418c8249bb99123e9e22.png
[20190225214926430.png]: /images/20220316/1e724b3998dc4feab3601600d32822b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 1]: /images/20220316/bd5eb48bd8a94feeae433443b0342ac6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70 2]: /images/20220316/cee5d0b6e3c64cf3bf5c637c60d20b92.png
[Link 1]: https://gitee.com/cckevincyh/VueDemo/tree/master/day05