一、Vue的计算属性是什么？
它的计算属性是 computed
二、计算属性computed的特点有哪些？
- computed是计算属性、实时响应的。计算属性会依赖于它所使用的data中的属性，只要是依赖的属性值有改变，则自动重新调用一下计算属性；
- 如果它所依赖的这些属性值没有发生改变，那么计算属性的值是从缓存中来的，而不是重新编译，那么它的性能就会比较高，所以Vue中尽可能的使用computed来代替watch。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstName" />
<input type="text" v-model="lastName" />
{
{
fullName}}
</div>
<script>
new Vue({
el: '#app',
data: {
firstName: 'hello',
lastName: 'vue'
},
computed: {
fullName: function() {
return this.firstName + this.lastName;
}
}
});
</script>
</body>
</html>
- 注意：data中不用声明
fullName； - 监听computed路由变化，发现不可行。
三、watch和computed的区别
1.watch监听的是一个变量（或者是一个常量）的变化，这个变量可能是一个单一的变化也可能是一个数组。 computed可以监控很多个变量，但是这个变量一定是vue实例里面的
四、watch监控自身属性变化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstName" />
<input type="text" v-model="lastName" />
{
{
fullName}}
</div>
<script>
new Vue({
el: '#app',
data: {
firstName: 'hello',
lastName: 'world',
fullName: 'hello'
},
watch: {
'firstName': function(newval, oldval) {
// console.log(newval,oldval);
this.fullName = this.firstName + this.lastName;
},
'lastName': function(newval, oldval) {
// console.log(newval,oldval);
this.fullName = this.firstName + this.lastName;
}
}
});
</script>
</body>
</html>
五、watch监控路由对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register/value">注册</router-link>
<!--组件的显示占位域-->
<router-view></router-view>
</div>
<script>
//1.0 准备组件
// var App = Vue.extend({});
var login = Vue.extend({
template: '<div><h3>登录</h3></div>'
});
var register = Vue.extend({
template: '<div><h3>注册{
{name}}</h3></div>',
data: function() {
return {
name: ''
}
},
created: function() {
this.name = this.$route.params.name;
}
});
//2.0 实例化路由规则对象
var router = new VueRouter({
routes: [{
path: '/login',
component: login
},
{
path: '/register/:name',
component: register
},
{
path: '/',
//当路径为/时，重定向到/login
redirect: '/login'
}
]
});
//3.0 开启路由对象
new Vue({
el: '#app',
router: router, //开启路由对象
watch: {
'$route': function(newroute, oldroute) {
console.log(newroute, oldroute);
//可以在这个函数中获取到当前的路由规则字符串是什么
//那么就可以针对一些特定的页面做一些特定的处理
}
}
})
</script>
</body>
</html>
六、 vue watch和computed的使用场景
- watch 监听某个数据的变化（监听完调用什么函数） 一个数据影响多个数据 （比如：浏览器自适应、监控路由对象、监控自身属性变化）
- computed 计算后返回新 一个数据受多个数据影响（比如：计算总价格、过滤某些数据）
- computed是用来处理你使用watch和methods的时候无法处理（比如有缓存的时候监听不了数据变化），或者是处理起来并不太恰当的情况的，利用computed处理methods存在的重复计算情况