watch
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[Vue]]
&color(red){※前提条件：本情報はVue 2.0を基づいて説明して...
#contents
*概要 [#y1858077]
一个对象、键是需要观察的表达式，值是对应回调函数。值也可...
#codeprettify{{
<body>
<div id="app">
<input type="text" v-model="num">
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: ''
},
watch: {
num(newVal, oldVal) {
// 监听 num 属性的数据变化
// 作用 : 只要 num 的值发生变化,这个方法就会被调用
// 第一个参数 : 新值
// 第二个参数 : 旧值,之前的值
console.log('oldVal:',oldVal)
console.log('newVal:',newVal)
}
}
})
</script>
</body>
}}
- immediate（立即处理 进入页面就触发）
- deep（深度监听）
对象和数组都是引用类型，引用类型变量存的是地址，地址没有...
#codeprettify{{
<body>
<div id="app">
<input type="button" value="更改名字" @click="change">
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
food: {
id: 1,
name: '冰激凌'
}
},
methods: {
change() {
this.food.name = '棒棒糖'
}
},
watch: {
// 第一种方式：监听整个对象，每个属性值的变化都...
// 注意：属性值发生变化后，handler执行后获取的 n...
food: {
// 每个属性值发生变化就会调用这个函数
handler(newVal, oldVal) {
console.log('oldVal:', oldVal)
console.log('newVal:', newVal)
},
// 立即处理 进入页面就触发
immediate: true,
// 深度监听 属性的变化
deep: true
},
// 第二种方式：监听对象的某个属性，被监听的属...
// 函数执行后，获取的 newVal 值和 oldVal 值不...
'food.name'(newVal, oldVal) {
console.log('oldVal:', oldVal) // 冰激凌
console.log('newVal:', newVal) // 棒棒糖
}
}
})
</script>
</body>
}}
* Watch和computed的区别 [#reaae8b6]
- computed支持缓存，只有依赖数据发生改变,才会重新进行计算...
- computed不支持异步，当computed内有异步操作时无效，无法...
- computed属性值会默认走缓存，计算属性是基于它们的响应式...
- 如果一个属性是由其它属性计算而来的，这个属性依赖其它属...
* 监测时handler新值和旧值一样 [#q5c6636b]
** 现象 [#m8dda539]
下面的代码，console打印出来，newValue 和 oldValue 的值一样
#codeprettify{{
<div id="app">
<h4>a的值是\{\{numbers.a\}\}</h4>
<input type="button" value="n++" @click="numbers.a++">
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
numbers : {
a : 0,
b : 0
}
},
watch: { // 监视属性
numbers : {
handler(newValue, oldValue) {
console.log("numbers对象里面的a被...
},
deep : true
}
}
})
</script>
}}
** 原因 [#u9ca1461]
在变更 (不是替换) 对象或数组时，旧值将与新值相同，因为它...
** 解决方案 [#ff412356]
想要得到差异内容，可以结合计算属性、序列化、反序列化生成...
#codeprettify{{
computed: {
numbersNew() {
return JSON.parse(JSON.stringify(this.numbers));
}
},
watch: { // 监视属性
numbersNew: {
handler(newValue, oldValue) {
console.log("numbers对象里面的a被修改了！", ne...
},
deep: true
}
}
}}
#hr();
コメント：
#comment_kcaptcha
終了行:
[[Vue]]
&color(red){※前提条件：本情報はVue 2.0を基づいて説明して...
#contents
*概要 [#y1858077]
一个对象、键是需要观察的表达式，值是对应回调函数。值也可...
#codeprettify{{
<body>
<div id="app">
<input type="text" v-model="num">
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: ''
},
watch: {
num(newVal, oldVal) {
// 监听 num 属性的数据变化
// 作用 : 只要 num 的值发生变化,这个方法就会被调用
// 第一个参数 : 新值
// 第二个参数 : 旧值,之前的值
console.log('oldVal:',oldVal)
console.log('newVal:',newVal)
}
}
})
</script>
</body>
}}
- immediate（立即处理 进入页面就触发）
- deep（深度监听）
对象和数组都是引用类型，引用类型变量存的是地址，地址没有...
#codeprettify{{
<body>
<div id="app">
<input type="button" value="更改名字" @click="change">
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
food: {
id: 1,
name: '冰激凌'
}
},
methods: {
change() {
this.food.name = '棒棒糖'
}
},
watch: {
// 第一种方式：监听整个对象，每个属性值的变化都...
// 注意：属性值发生变化后，handler执行后获取的 n...
food: {
// 每个属性值发生变化就会调用这个函数
handler(newVal, oldVal) {
console.log('oldVal:', oldVal)
console.log('newVal:', newVal)
},
// 立即处理 进入页面就触发
immediate: true,
// 深度监听 属性的变化
deep: true
},
// 第二种方式：监听对象的某个属性，被监听的属...
// 函数执行后，获取的 newVal 值和 oldVal 值不...
'food.name'(newVal, oldVal) {
console.log('oldVal:', oldVal) // 冰激凌
console.log('newVal:', newVal) // 棒棒糖
}
}
})
</script>
</body>
}}
* Watch和computed的区别 [#reaae8b6]
- computed支持缓存，只有依赖数据发生改变,才会重新进行计算...
- computed不支持异步，当computed内有异步操作时无效，无法...
- computed属性值会默认走缓存，计算属性是基于它们的响应式...
- 如果一个属性是由其它属性计算而来的，这个属性依赖其它属...
* 监测时handler新值和旧值一样 [#q5c6636b]
** 现象 [#m8dda539]
下面的代码，console打印出来，newValue 和 oldValue 的值一样
#codeprettify{{
<div id="app">
<h4>a的值是\{\{numbers.a\}\}</h4>
<input type="button" value="n++" @click="numbers.a++">
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
numbers : {
a : 0,
b : 0
}
},
watch: { // 监视属性
numbers : {
handler(newValue, oldValue) {
console.log("numbers对象里面的a被...
},
deep : true
}
}
})
</script>
}}
** 原因 [#u9ca1461]
在变更 (不是替换) 对象或数组时，旧值将与新值相同，因为它...
** 解决方案 [#ff412356]
想要得到差异内容，可以结合计算属性、序列化、反序列化生成...
#codeprettify{{
computed: {
numbersNew() {
return JSON.parse(JSON.stringify(this.numbers));
}
},
watch: { // 监视属性
numbersNew: {
handler(newValue, oldValue) {
console.log("numbers对象里面的a被修改了！", ne...
},
deep: true
}
}
}}
#hr();
コメント：
#comment_kcaptcha
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
