vue 当中的属性方法watch、computed和methods

最新推荐文章于 2023-01-31 15:54:02 发布

非往

最新推荐文章于 2023-01-31 15:54:02 发布

阅读量424

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_42112846/article/details/88563347

版权

VUE 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

主要类说一下：watch、computed和methods三个属性之间的对比

首先我们来创建一下案例结构：

<body>
  <div id="app">
      <input type="text" v-model="firstname">+
      <input type="text" v-model="lastname">=
      <input type="text" v-model="fullname">
  </div>
  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
          firstname: '',
          lastname: '',
          fullname: ''
      },

      create(){},

      methods: {},
    });
  </script>

1.watch监听数据变化

watch和methods平级，使用这个属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数
该方法可以不用绑定事件，而methods当中一般写的是触发函数，不再页面触发的函数写在与methods并列即可；

当然vue有和小程序onload一样页面初次进来就加载的函数，是create所以要是页面初次进来有需要赋值的data用来页面的填充可以使用这个函数，或者在这个函数当中去调用methods当中的韩式也是可以的；

watch函数的监听变化可以如下：

<body>
  <div id="app">
      <input type="text" v-model="firstname">+
      <input type="text" v-model="lastname">=
      <input type="text" v-model="fullname">
  </div>

  

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
          firstname: '',
          lastname: '',
          fullname: ''
      },
      methods: {},
      watch: {
          'firstname': function(newVal){
              this.fullname = newVal + '-' + this.lastname
          },
          'lastname': function(newVal){
              this.fullname = this.firstname + '-' + newVal
          }
      }

//注意：watch函数有两个变量，只是在该函数中有一个没有用上，写上也没有关系
//比如firstname可以写成这样
 //'firstname': function(newVal,oldVal){
 //             this.fullname = newVal + '-' + this.lastname
 //         },

    });
  </script>
</body>



//当然watch也可以监听路由的变化，写法如下:


<!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>
    var login = {
      template: '<h3>这是登录子组件，这个组件是 奔波霸 开发的。</h3>'
    }

    var register = {
      template: '<h3>这是注册子组件，这个组件是 霸波奔 开发的。</h3>'
    }

    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: {
          //监听路由的变化
          '$route.path': function(newVal,oldVal){
              if(newVal === '/login'){
                  console.log('欢迎进入login')
              }else if(newVal === '/register'){
                console.log('欢迎进入register')
              }
          }
      }
    });
  </script>
</body>

</html>

1.computed计算属性的使用

computed和methods平级

在 computed 中，可以定义一些属性，这些属性，叫做【计算属性】，计算属性的本质，就是一个方法，只不过我们在使用这些计算属性的时候，是把它们的名称直接当作属性来使用的；并不会把计算属性当作方法去调用；

computed与data的区别

计算属性(computed，也是用来存储数据用的，但是和data属性相比还是有区别

区别就是，计算属性必须是一个由返回值的方法

但调用的方法是一样的：比如下面：

computed与methods的区别

1 计算属性是基于它所依赖的数据进行更新，在有在相关依赖的数据发生变化了才会进行更新，而普通的方法每次都会执行

2 计算属性是有缓存的，只要它所依赖的数据没有发生改变，后面的每一次访问计算属性中的值，都是之前缓存的结果，不会重复执行,而普通的方法每次都会执行。

需要注意的两单就是：

计算属性，在引用的时候，一定不要加 () 去调用，直接把它当作普通属性去使用就好了；

只要计算属性，这个 function 内部，所用到的任何 data 中的数据发送了变化，就会立即重新计算这个计算属性的值

比如说，我们之前创建的实例：

<body>
  <div id="app">
      <input type="text" v-model="firstname">+
      <input type="text" v-model="lastname">=
      <input type="text" v-model="fullname">
  </div>


  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
          firstname: '',
          lastname: '',
      },
      methods: {},
      watch: {},
      computed: {
          'fullname': function(){
              return this.firstname + '-' + this.lastname
          }
      }
    });
  </script>
</body>

//1.fullname没有在data中定义
//2.在compute定义fullname后直接return出去就好
///计算属性的求值结果，会被缓存起来，方便下次直接使用； 如果 计算属性方法中，所有的任何数据，
//都没有发生过变化，则不会重新对计算属性求值；

//也就是说上面firstname 或者lastname只有有一个属性发生了变化都会去重新计算fullname的值
//要是都没有发生变化 则不会重新计算

下面简单总结下：

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

简单的说就是：

vue 中computed 和methods 在使用效果来看可以说是一样的，但是深入看还是不一样的。

区别就在于： computed 依赖缓存， methods 却不是。

怎么理解呢？

当Dom每次需要渲染computed的值，这个值已经处于缓存之中，不需要再重复的经历一遍计算过程，只有当computed依赖的数据变量发生变化，这个计算属性会自动更新，不需要渲染触发。

methods 的值被获取的时候就会每次都会重新经历一遍计算过程。

所以由此可以看出，computed和methods 的应用场景和计算过程的复杂程度有关，如果计算过程复杂庞杂，而且计算属性会被经常调用（getter），那么最好使用缓存；如果，需要的值，计算简单，调用不频繁，实时性比较高（存在异步请求）,会比较适合methods
computed有缓存，若相关数据未发生变化，则不调用；
methods无缓存，需要事件才能调用它（如点击等），绑定在页面或者其他；
watch多用于数据交互频繁的内容。（例如定时axios从服务器获取数据）

非往

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 当中的属性方法watch、computed和methods

主要类说一下：watch、computed和methods三个属性之间的对比首先我们来创建一下案例结构：&lt;body&gt; &lt;div id="app"&gt; &lt;input type="text" v-model="firstname"&gt;+ &lt;input type="text" v-model="
复制链接

扫一扫

专栏目录