一、watch属性的使用
1.传统方式实现双向数据改变监听事件（姓名拼接案例）
<div id="app">
姓:
<input type="text" value="" @keyup="textChange()" v-model="firstname"/> +
名:
<input type="text" value="" @keyup="textChange()" v-model="lastname"/> =
姓名:
<input type="text" value="" v-model="fullname"/>
</div>
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
fullname: ''
},
methods: {
textChange(){
this.fullname = this.firstname+ this.lastname
}
}
});
来吧展示：
watch:{
'firstname':function () {
console.log('firstname被监听到了')
}
}
2.使用watch监听事件改变（姓名拼接案例）
将methods方法除掉，然后改用watch去监听事件的变化
watch:{
//函数中有两个参数，newval和oldval
//newval:最新的值
//oldval:上一次的值
'firstname':function (newval,oldval) {
// console.log('firstname被监听到了')
console.log('新值:'+newval +'-----' +'旧值:'+oldval)
}
}
watch方式实现姓名拼接
watch:{
'firstname':function (newval,oldval) {
this.fullname = newval + this.lastname
//或者是
// this.fullname = this.firstname + this.lastname
},
'lastname':function (newval,oldval) {
this.fullname = this.firstname + this.lastname
}
}
3. 使用watch监听url地址的改变
需求：当组件进行切换时，在页面上显示一句话 欢迎进入登录页面 / 注册页面
通过查看知道$router的path对应的就是url跳转的路由地址
所以我们可以通过watch去监听得到url地址
<div id="app">
<router-link to="/login">点击登录</router-link>
<router-link to="/res">点击注册</router-link>
<router-view></router-view>
<!-- 当组件切换时，在页面上显示一句话 欢迎进入 登录页面 / 注册页面-->
<h2>{{msg}}</h2>
</div>
<script>
var login = {
template:'<h2>登录组件</h2>'
}
var res = {
template:'<h2>注册组件</h2>'
}
var router = new VueRouter({
routes:[
{path:'/login',component:login},
{path:'/res',component:res}
]
})
var vm = new Vue({
el: '#app',
data: {
//msg:'欢迎访问----'
msg:''
},
created() { // 这个 created 生命周期函数，在页面刚被打开的时候会执行，同时，如果页面被刷新了，也会执行
// console.log('okokok')
const path = this.$route.path
if (path === '/login') {
this.msg = '欢迎进入登录页面'
} else if (path === '/reg') {
this.msg = '欢迎进入注册页面'
}
},
router,
watch: { //watch是一个对象，对象上是一些键值对
// 在 watch 中，可以监听当前 vm 实例上所有的属性变化, 页面的刷新，不会触发 $router.path 的改变事件
'$route.path': function (newval) {
// console.log(newval)
if (newval === '/login') {
this.msg = '欢迎进入登录页面'
} else if (newval === '/reg') {
this.msg = '欢迎进入注册页面'
}
}
}
});
</script>
小结：根据$router的path的不同就能监听url地址的改变
$router属于this,而this就是当前的vm实例，通过访问监听
this当前实例身上的.path属性就能监听到地址的变化
data中的msg也是vm实例身上的,页面可以通过this来获取到，所以可以通过watch来监听path的变化，从而改变data身上的msg通过切换组件的不同展示不同的msg到页面上
二、computed计算属性的基本使用
1.使用computed计算属性实现姓名拼接案例
<script>
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: ''
},
computed: { // 计算属性区域
//只要访问fullname，那么内部就会调用这个方法，return做一个拼接，一引用一次就会调用一次
'fullname': function () {
// 这个 fullname 就是就是计算属性
// 在页面中，使用计算属性的时候，永远把它当作普通的属性来使用
// 只要 计算属性的 function中，所依赖的任何数据发生变化了，则会触发 计算属性的重新求值
// 计算属性的值，如果被第一计算后，没有发生过变化，则会 把 第一次的值，缓存起来，供后续使用，这样能够提高性能
console.log('ok')
return this.firstname + '-' + this.lastname
}
}
});
</script>
</script>
来吧展示：
上述案例存在的一个问题是，fullname只能获取到firstname和lastname的值，并不能给他们赋值，也就是即便删掉fullname文本框中的值，也不会改变firstname和lastname中的值
解决方法 ----> 通过computed计算属性的get和set方法去解决
2. computed计算属性的get和set方法的使用
computed: { // 计算属性区域
'fullname': {
get() { // get 表示外界要引用 fullname 的值
console.log('调用了fullname的get方法')
return this.firstname + '-' + this.lastname
},
set(val) { // 外界重新为 fullname 赋值了
const parts = val.split('-')
this.firstname = parts[0] || ''
this.lastname = parts[1] || ''
}
}
}
字符串的 split() 方法的使用
小结：
修改前面的firstname和lastname就会调用get()方法，修改后面的fullname就会调用set()方法
页面一刷新就会直接调用get()方法
当修改fullname框中的值才会触发set()方法
来吧展示：
