methods、computed、watch 区别

最新推荐文章于 2023-05-07 13:20:53 发布

zb0002011

最新推荐文章于 2023-05-07 13:20:53 发布

阅读量114

点赞数

分类专栏： # vue

本文链接：https://blog.csdn.net/zb0002011/article/details/108689068

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

methods、computed、watch实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
 
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    n: 0
  },
  template: `
    <div>
      <button @click="n = 1">watch n值不变</button>  <!-- watch 点击第一次回打印日志；后面因为n不变，就不会打印日志了 -->
      <button @click="n += 1">watch n值改变'</button><!-- watch每次点击n值都会改变，因此都会打印日志 -->

      <button @click="n_method">n_method方法</button><!-- method 每次点击都会打印日志-->
      <button >n_method2方法：{{n_method2()}}</button><!-- method 只在第一次加载的时候，返回n值 -->

      <button >n_compute方法：{{n_compute}}</button><!-- compute 只在第一次加载的时候，返回n值 -->

     
    </div>
  `,
	
methods: {
    n_method: function () {
     console.log("n_method 调用了");
    },
	n_method2: function () {
	   console.log("n_method2 调用了");
      return this.n
    }				 
  },
  computed:{
	   n_compute:function() {
		   //只要computed方法中出现的data值改变，就会调用computed方法
	     console.log("n_compute 调用了"+this.n);
	  }
     
  }	,	
  watch: {
    n() {
      console.log("n 变了");
    },
  }
})
</script>
</body>
</html>

1、watch

watch好理解，用于监听数据变化，其中可以监听的数据来源有三部分：props、data、computed内的数据；watch提供两个参数（newValue，oldValue），第一个参数是新值，第二个参数保存旧值；

当数据变化时执行一个函数

watch属性可以是字符串、函数、对象、数组

拥有deep，immediate两属性

当deep：true 会监听到obj对象的所有内部属性，默认值为false

因为watch不会监听第一次变化；当 immediate：true 时，回调函数会在监听开始后立刻执行，可以监听到到第一次变化。

2、methods

methods也好理解，每次渲染的时候调用一次

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  methods: {
    reversedMessage2: function () {
      return this.message.split('').reverse().join('')
    }
  }
})
</script>
</body>
</html>

3、computed

相同点：我们可以使用 methods 来替代 computed，效果上两个都是一样的，

不同点：但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

computed用于处理复杂的逻辑运算，主要和methods储存方法来进行区分；methods储存方法，，computed储存需要处理的数据值；methods每次都会调用，computed有缓存机制，只有改变时才执行，性能更佳。

实例1、computed和methods可以互换。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
  <p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    reversedMessage2: function () {
      return this.message.split('').reverse().join('')
    }
  }
})
</script>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<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 = '菜鸟教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
</script>
</body>
</html>

从实例运行结果看在运行 vm.site = '菜鸟教程 http://www.runoob.com'; 时，setter 会被调用， vm.name 和 vm.url 也会被对应更新。

zb0002011

关注

0
点赞
踩
0

收藏

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

methods、computed、watch实例<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例 - 菜鸟教程(runoob.com)</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script></head>
复制链接

扫一扫

专栏目录