vue从入门到精通(九):监视属性

一,监视属性(watch)

1.当被监视的属性变化时,回调函数自动调用,进行相关操作

2.监视的属性必须存在,才能进行监视!!

3.监视的两种写法:
(1).new Vue时传入watch配置
(2).通过vm.$watch监视

如下:

<body>
准备好一个容器 --><!--
 id="root">
<h2>今天天气很{{info}}h2>
<button @click="changeweather">切换天气button>
div>

<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el:'#root',
data:{
	isHot:true
},
watch :{
isHot :{
//初始化时让handler调用一下
immediate:true,
//handler什么时候调用:当isHot发生改变时
handler(newValue,oldvalue){
	console.log(newValue,oldValue)
}
}
vm.$watch('isHot',{
//初始化时让handler调用一下
immediate:true,
//handler什么时候调用:当isHot发生改变时
handler(newValue,oldValue){
	console.log(newValue,oldValue)
}
script>

二,深度监视

深度监视:
(1).Vue中的watch默认不监测对象内部值的改变(一层)
(2).配置deep:true可以监测对象内部值改变(多层)。
备注:
(1).Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!
(2).使用watch时根据数据的具体结构,决定是否采用深度监视。

<script type="text/javascript">
vue.config.productionTip = false;
const vm= new Vue({
el:'#root',data:{
isHot:true,
numbers:f
a:1,
6:2
computed:f...
methods :
watch :{
isHot:{
//监视多级结构中某个属性的变化
//'numbers.a':{
11handler(newValue,oldvalue){
1p
console.log(newValue,oldValue)
11 },
numbers:{
//深度监视
deep:true,
handler(){
	console.log('numbers变了')
}
script>

你可能感兴趣的:(vue从入门到精通,vue.js,javascript,前端)