1. What are the calculated properties of Vue?
Its computational properties are computed
2. What are the characteristics of computed properties?
- Computed is computing properties and real-time response. The calculated attribute will depend on the attribute in the data it uses. As long as the value of the dependent attribute changes, the calculated attribute will be called again automatically;
- If the value of the attributes it depends on has not changed, then the calculated attribute value is from the cache instead of recompilation, then its performance will be higher, so Vue uses computed instead of watch as much as possible.
<!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>
- Note: There is no need to declare in data
fullName; - Monitor the calculated route changes and find that it is not feasible.
Three, the difference between watch and computed
1. Watch monitors the （或者是一个常量）change of a variable . This variable may be a single change or an array. Computed can monitor many variables, but this variable must be in the vue instance
Fourth, watch monitors its own attribute changes
<!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>
Five, watch monitors routing objects
<!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>
Six, the use of vue watch and computed scenarios
- watch Monitor the changes of a certain data (what function is called after monitoring) One data affects multiple data (for example: browser adaptation, monitoring routing objects, monitoring own attribute changes)
- A new data returned after computed calculation is affected by multiple data (for example: calculating the total price, filtering some data)
- Computed is used to deal with situations that cannot be processed when you use watch and methods (for example, you can't monitor data changes when there is a cache), or if the processing is not appropriate, use computed to deal with the repetitive calculation of methods.