目录
watch监测
提升案例:要求根据点击按钮,控制对应的div标签内部的值
天气预报案例(watch多种简写方式)及data注意事项
watch及computed区别
第一部分:watch监测
const vm = new Vue({
el: '#root',
data() {
return {
//创建一个开关,起始值为true
isHot: true,
// 创建一个对象 内部含有其它几个变量数值
number: {
a: 1,
b: 2
}
}
},
watch: {
// 侦听isHot内部值得变化
isHot: {
handler(n, o) {
console.log(n, o)
}
},
// 侦听number.a内部值得变化 若是在返回值内部深层的变量时,那么我们要记得加单引号否则会不执行
//若是执行多个时,那么开启深层监视 deep:true
'number.a':{
handler(){
console.log('a的值发生了改变')
}
}
}
})
</script>
第二部分:提升案例:要求根据点击按钮,控制对应的div标签内部的值
<!-- watch的其它写法 -->
<div id="root">
<!-- 添加插值语法 -->
<div>今天天气很热{{info}}</div>
<!-- 添加点击事件方法 -->
<button @click="change()">点击</button>
<div>数值改变为{{good}}</div>
<button @click="tool()">点击后</button>
</div>
<script type="text/javascript">
let cont = 'Hello my name is'
const vm = new Vue({
el: '#root',
data() {
return {
itemm: true,
a:true,
goods: {
lastname: 'zhang',
fastname: 'san',
countt:0
}
}
},
methods: {
tool() {
this.a = !this.a
},
change() {
// this.itemm = !this.itemm;
this.goods.countt++;
}
},
computed: {
good() {
// console.log('你已经使用'+ this.itemm +'次cont了')
console.log('good被调用了');
return this.goods.lastname + this.goods.fastname+this.a
},
info() {
console.log('info被调用了')
return this.goods.lastname+this.goods.countt
}
}
})
第三部分:天气预报案例(watch多种简写方式)及data注意事项
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
// 下面若不写return,那么就去掉data的(),写成对象的形式
data:{
isHot: true
},
computed: {
info(){
return this.isHot ? '炎热' : '凉爽'
}
},
methods:{
changeWeather(){
this.isHot = !this.isHot
}
}
// watch: {
// 侦听isHot内部值得变化
// immediate: true//需要该初识化,那么就不能简写,若是不用那么就可以简写
// isHot: {
// handler(n, o) {
// console.log(n, o)
// }
// },
//简写方式:
//这里的函数指的是监视谁 后面的参数就当handler去用
// isHot(newvalue, oldvalue){
// console.log('isHot被调用了',newvalue, oldvalue,this)
// }
// }
})
// 外部调用(正常写法)
// vm.$watch('isHot',{
// immediate: true,//需要该初识化,那么就不能简写,若是不用那么就可以简写
// deep:true,
// //若是简写下面的handler要原样写出不能写监视的方法,否则会报错
// handler(newvalue, oldvalue){
// console.log('isHot被调用了',newvalue, oldvalue)
// }
// })
//简写方式(切记记住下面使用function,不能写箭头函数,否则会报错)
// vm.$watch('isHot',function(newvalue, oldvalue){
// console.log('isHot被修改了',newvalue, oldvalue)
// })
第四部分:watch及computed区别
<div id="root">
姓:<input type="text" v-model="fistname" /><br /><br />
名:<input type="text" v-model="lastname" /><br /><br />
全名:<span>{{fullname}}</span><br /><br />
</div><!-- computed和watch之间的区别:
1,computed能完成的功能,watch都可以完成
2,watch能完成的功能,computed不一定能完成,例如watch可以进行异步操作
两个重要的小原则:
1,所被vue管理的函数,最好写成普通函数,这样this的执行才是vm或组建实例对象
2,所有不被vue所管理的函数(定时器的回调函数,ajax的回调函数,promise回调函数等),最好写成箭头函数
这样this的指向才是vm或组建实例对象
-->
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
//data内部的值相当于就是定义了
fistname: '张',
lastname: '三',
// 若要用watch监视fullname,那么就要做好添加
fullname: '张-三'
},
//监视fistname
//采用watch写,这个是命令式 代码是重复的
watch: {
//简写方式
// 监视姓 所以第一个写传入的参数 第二个是写名
//添加一个定时器 可以执行 具有效果
fistname(newvalue) {
//定时器里的箭头函数是浏览器控制及js引擎调用的 非window调用
setTimeout(() => {
this.fullname = newvalue + this.lastname
}, 1000)
},
// 监视名 所以第二个写传入的参数 第一个是写姓
lastname(oldvalue) {
setTimeout(() => {
this.fullname = this.fistname + oldvalue
}, 1000)
}
}// 若是要用计算属性去改变值,那么就不用在data中添加fullname属性值
// computed:{
// // 简单 简洁 但有时候必须要用watch去写,比如定时器
// fullname(){
// setTimeout(()=>{
// return this.fistname+this.lastname
// //延迟一秒钟执行
// },1000)
// //采用计算属性 最终不会执行 也不会报错 所以有时候未必可用
// }
// }
})