主要类说一下:watch、computed和methods三个属性之间的对比
首先我们来创建一下案例结构:
<body>
<div id="app">
<input type="text" v-model="firstname">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
</div>
<script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
fullname: ''
},
create(){},
methods: {},
});
</script>
1.watch监听数据变化
watch和methods平级,使用这个 属性,可以监视 data 中指定数据的变化,然后触发这个 watch 中对应的 function 处理函数
该方法可以不用绑定事件,而methods当中 一般写的是触发函数,不再页面触发的函数写在与methods并列即可;
当然vue有和小程序onload一样页面初次进来就加载的函数,是create所以要是页面初次进来有需要赋值的data用来页面的填充可以使用这个函数,或者在这个函数当中去调用methods当中的韩式也是可以的;
watch函数的监听变化可以如下:
<body>
<div id="app">
<input type="text" v-model="firstname">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
</div>
<script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
fullname: ''
},
methods: {},
watch: {
'firstname': function(newVal){
this.fullname = newVal + '-' + this.lastname
},
'lastname': function(newVal){
this.fullname = this.firstname + '-' + newVal
}
}
//注意:watch函数有两个变量,只是在该函数中有一个没有用上,写上也没有关系
//比如firstname可以写成这样
//'firstname': function(newVal,oldVal){
// this.fullname = newVal + '-' + this.lastname
// },
});
</script>
</body>
//当然watch也可以监听路由的变化,写法如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/vue-router-3.0.1.js"></script>
</head>
<body>
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<script>
var login = {
template: '<h3>这是登录子组件,这个组件是 奔波霸 开发的。</h3>'
}
var register = {
template: '<h3>这是注册子组件,这个组件是 霸波奔 开发的。</h3>'
}
var router = new VueRouter({
routes: [ // 路由规则数组
{ path: '/', redirect: '/login' },
{ path: '/login', component: login },
{ path: '/register', component: register }
],
linkActiveClass: 'myactive' // 和激活相关的类
})
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
// router: router
router,
watch: {
//监听路由的变化
'$route.path': function(newVal,oldVal){
if(newVal === '/login'){
console.log('欢迎进入login')
}else if(newVal === '/register'){
console.log('欢迎进入register')
}
}
}
});
</script>
</body>
</html>
1.computed计算属性的使用
computed和methods平级
在 computed 中,可以定义一些 属性,这些属性,叫做 【计算属性】, 计算属性的本质,就是 一个方法,只不过我们在使用 这些计算属性的时候,是把它们的名称直接当作属性来使用的;并不会把 计算属性当作方法去调用;
computed与data的区别
计算属性(computed,也是用来存储数据用的,但是和data属性相比还是有区别
区别就是,计算属性必须是一个由返回值的方法
但调用的方法是一样的:比如下面:
computed与methods的区别
1 计算属性是基于它所依赖的数据进行更新,在有在相关依赖的数据发生变化了才会进行更新,而普通的方法每次都会执行
2 计算属性是有缓存的,只要它所依赖的数据没有发生改变,后面的每一次访问计算属性中的值,都是之前缓存的结果,不会重复执行,而普通的方法每次都会执行。
需要注意的两单就是:
计算属性,在引用的时候,一定不要加 () 去调用,直接把它当作普通 属性去使用就好了;
只要 计算属性,这个 function 内部,所用到的 任何 data 中的数据发送了变化,就会立即重新计算 这个 计算属性的值
比如说,我们之前创建的实例:
<body>
<div id="app">
<input type="text" v-model="firstname">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
</div>
<script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
},
methods: {},
watch: {},
computed: {
'fullname': function(){
return this.firstname + '-' + this.lastname
}
}
});
</script>
</body>
//1.fullname没有在data中定义
//2.在compute定义fullname后直接return出去就好
///计算属性的求值结果,会被缓存起来,方便下次直接使用; 如果 计算属性方法中,所有的任何数据,
//都没有发生过变化,则不会重新对计算属性求值;
//也就是说上面firstname 或者lastname只有有一个属性发生了变化都会去重新计算fullname的值
//要是都没有发生变化 则不会重新计算
下面简单总结下:
computed
属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。主要当作属性来使用;methods
方法表示一个具体的操作,主要书写业务逻辑;watch
一个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可以看作是computed
和methods
的结合体;
简单的说就是:
vue 中computed 和methods 在使用效果来看可以说是一样的,但是深入看还是不一样的。
区别就在于: computed 依赖缓存, methods 却不是。
怎么理解呢?
当Dom每次需要渲染computed的值,这个值已经处于缓存之中,不需要再重复的经历一遍计算过程,只有当computed依赖的数据变量发生变化,这个计算属性会自动更新,不需要渲染触发。
methods 的值被获取的时候就会每次都会重新经历一遍计算过程。
所以由此可以看出,computed和methods 的应用场景 和 计算过程的复杂程度有关, 如果计算过程复杂庞杂,而且计算属性会被经常调用(getter),那么最好使用缓存;如果,需要的值,计算简单,调用不频繁,实时性比较高(存在异步请求),会比较适合methods
computed有缓存,若相关数据未发生变化,则不调用;
methods无缓存,需要事件才能调用它(如点击等),绑定在页面或者其他;
watch多用于数据交互频繁的内容。(例如定时axios从服务器获取数据)