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