Vue 2.0修仙之路 — 计算属性以及和watch，meth
2018-05-31 本文已影响245人
杀个程序猿祭天
计算属性以及和watch，methods的区别
- 监听属性 和 计算属性相比 更适合异步操作，
当一个属性依赖另外两个属性的时候适合用 计算属性
- 计算属性 相比较 methods 性能好点 有缓存，有依赖 只有data数据发生变化时才执行函数
反之执行一次 而 methods 没有依赖 不管数据是否发生变化 每次都会执行
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div>{{res_msg}}</div>
<div>{{res_msg1()}}</div>
<input type="text" v-model='res_msg'>
<button @click="change_">改变值</button>
{{res_msg}}
{{res_msg}}
{{res_msg}}
{{res_msg1()}}
{{res_msg1()}}
{{res_msg1()}}
<p>姓：<input type="text" v-model="firstName" ></p>
<p>名：<input type="text" v-model="lastName" ></p>
<p>姓名：{{fullName}}</p>
</div>
</body>
</html>
<script src="js/demo5.js"></script>
JS代码
window.onload = function(){
var a = 100;
var b = 100;
// 数据
var data = {
msg:'hello world!',
firstName:"张",
lastName:"二蛋",
fullName:"张二蛋",
}
// 方法
var methods = {
change_:function(){
vm.res_msg = "app";
console.log(vm.res_msg);
},
res_msg1:function(){
a++;
return a ;
// return this.msg.split("").reverse().join("");
}
}
// 过滤器
var filters = {
}
// 监听属性 和 计算属性相比 更适合异步操作，
// 当一个属性依赖另外两个属性的时候适合用 计算属性
var watch = {
firstName:function(value){
this.fullName = value + this.lastName
},
lastName:function(value){
this.fullName = this.firstName + value
}
}
/* 计算属性 相比较 methods 性能好点 有缓存，有依赖 只有data数据发生变化时才执行函数
反之执行一次 而 methods 没有依赖 不管数据是否发生变化 每次都会执行
*/
var computed = {
res_msg:{
get:function(){//getter函数获取值 默认执行
// return this.msg.split("").reverse().join("");
b++;
return b ;
},
set:function(newValue){//setter函数设置值
console.log(newValue)
this.msg = newValue.split("").reverse().join("");
}
},
// fullName:{
// get:function(){
// return this.firstName + this.lastName;
// }
// }
}
// 实例
var vm = new Vue({
el:'#app',
data:data,
methods:methods,
filters:filters,
computed:computed,
watch:watch
})
}
