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>
<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 也会被对应更新。

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页