watch、computed、methods的区别

最新推荐文章于 2023-09-05 10:51:42 发布

「已注销」

最新推荐文章于 2023-09-05 10:51:42 发布

阅读量200

点赞数

分类专栏：前端文章标签： vue的学习历程

原文链接：https://www.mk2048.com/blog/blog.php?id=hi0ik1ac1k1j&title=watch%E3%80%81computed%E3%80%81methods%E7%9A%84%E5%8C%BA%E5%88%AB

版权

前端专栏收录该内容

1143 篇文章 3 订阅

订阅专栏

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

三者比较：

相同点：都是一个function

不同点：

①computed要return出去一个值，watch不用

②methods里的function更侧重业务逻辑（大量）的处理，computed里的function不适合做大量业务逻辑

使用场景：

watch：适合监听一些虚拟的东西，如路由

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <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:'<h1>登录</h1>'
    }
    var register = {
      template:'<h1>注册</h1>'
    }

    var router = new VueRouter({
      routes:[
        { path:'/',redirect:'login' },
        { path:'/login',component:login },
        { path:'/register',component:register },
      ],
      linkActiveClass:'myactive'
    })

    var vm = new Vue({

      el:'#app',
      data:{},
      methods:{},
      router,
      watch:{
        //this.$route.path
        '$route.path':function(newval){
          console.log('ok')
          if(newval === '/login'){
            console.log('欢迎进入logon页面')
          }
          else if(newval === '/register'){
            console.log('欢迎进入register页面')
          }
        }
      }

    })

  </script>
</body>
</html>

View Code

methods：适合做一些方法的调用

computed：可能需要引用一些数据，经过一系列的操作返回一个新的数据

<!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>

View Code

更多专业前端知识，请上【猿2048】www.mk2048.com

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
watch、computed、methods的区别

1. `computed`属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用，要return出去一个值； 2. `methods`方法表示一个具体的操作，主要书写业务逻辑； ...
复制链接

扫一扫