下面是计算属性相关代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue3</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link rel="stylesheet" type="text/css" href="main.css"/>-->
<script src="vue.js"></script>
</head>
<body>
<!--计算属性computed,可以用在一些复杂逻辑上-->
<div id="app">
<!--1.模板中逻辑过重，不易维护-->
<p>{{msg.split('').reverse().join('')}}</p><br>
<!--2.用上computed属性，适用于复杂逻辑-->
<p>原值:{{msg}}</p>
<p>使用computed:字符串反转后的值:{{reverseMsg}}</p><br>
<!--3.用methods-->
<p>原值:{{msg}}</p>
<p>使用methods:字符串反转后的值:{{reverseMsg1()}}</p><br>
<!--我们可以发现computed属性和methods得到的结果是一样的。但是computed是基于它的缓存依赖（例子中指vm.msg)，
只有相关依赖改变才会重新取值；但是methods，每次重新渲染时，都会重新取值-->
<!--所以说一般computed性能更好--> <!--计算属性默认只有getter,不过我们可以设置setter-->
<p>{{fullName}}</p>
<p>{{firstName}}</p>
<p>{{lastName}}</p>
</div> <script>
var vm=new Vue({
el: '#app',
//选项对象
data:{
msg:'hello',
firstName:'Smith',
lastName: 'Lee'
},
//声明计算属性,提供的函数将用作vm.reverseMsg的getter
//vm.reverseMsg依赖于vm.msg；vm.msg改变时，vm.reverseMsg也会改变
computed:{
//计算属性的getter
reverseMsg:function(){
return this.msg.split('').reverse().join('');
},
fullName:{
get:function(){
return this.firstName+' '+this.lastName;
},
set:function(newValue){
var value=newValue.split(' ');
this.firstName=value[0];
this.lastName=value[1];
}
} },
methods:{
reverseMsg1:function(){
return this.msg.split('').reverse().join('');
}
}
});
vm.fullName='John Lee';
</script>
</body>
</html>
2.下面是监听器相关代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue4 监听属性</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link rel="stylesheet" type="text/css" href="main.css"/>-->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="meter">
<input type="text" v-model="kilometer">
<p class="test"></p>
</div>
<!--其实计算属性在大多数时候更合适，但是当数据执行异步操作或开销较大的操作时，需要采用监听器操作-->
<script>
var vm=new Vue({
el: '#app',
data:{
meter:'',
kilometer: ''
},
watch:{
//watch创建了meter和kilometer两个方法
meter:function(val){
this.meter=val;
this.kilometer=val/1000;
},
kilometer:function(val){
this.kilometer=val;
this.meter=val*1000;
}
}, });
vm.$watch('meter',function(newValue,oldValue){
document.getElementsByClassName('test')[0].innerHTML="meter新值："+newValue+ ";" + "meter旧值："+oldValue;
})
</script>
</body>
</html>
在第一个输入框中输入123后，运行结果：
参考：https://cn.vuejs.org/v2/guide/，http://www.runoob.com/vue2