1. 時計とは何ですか?
watch: データ内のデータが変更されたかどうかを監視するために使用されます。変更されると、他の操作を実行できます [これもメソッドです]
2. 時計を分析する
監視する場合、監視には 2 つのパラメータを指定でき、最初のパラメータは更新されたデータ、2 番目のパラメータは古いデータです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../public/js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>{
{text}}</h1>
<button @click="text = '我是新的一'">监听</button>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
text: '我是旧一',
},
watch: {
//监听器的作用就是用来监听数据是否发生了变化，变化后可以进行一些其他操作
//只要没有发生变化，就没有办法进行其他的操作
text: function (newData, oldData) {
//newData是更新后的数据
//oldData是旧数据
console.log(newData, oldData)
this.text = '我是最新的一'
}
}
})
</script>3. 監視プロパティと計算プロパティの違い
計算プロパティとリスニング プロパティの違い
1. 計算プロパティの取得には戻りが必要ですが、監視プロパティの戻りはオプションです。
2. 計算プロパティにはキャッシュの効果がありますが、監視プロパティにはキャッシュがありません
。 3. 計算プロパティは次のことができます。カスタマイズされた名前を持つが、プロパティを監視する 属性は監視できるのみで、データ内で同じ名前を持つ
4. 計算された属性は複雑な操作に適していますが、監視属性は Ajax などの一部の消費関数に適しています
4. 先進の時計
watch を使用して監視すると、特定のデータ [単一データ、配列] を監視できることがわかりますが、オブジェクトを監視すると、データは変更されていますが、監視プロンプトが表示されません。
現時点では、詳細な監視を有効にする必要があります。詳細な監視を有効にしないと、監視は最初のレイヤーのみを監視し、オブジェクトのデータは変更されますが、オブジェクトの最初のアドレスは変更されないためです。変更されているため、時計はデータが発生していないと判断します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../public/js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>{
{text}}</h1>
<button @click="setHandel">监听</button>
<h1>{
{array}}</h1>
<button @click="setArray">更改数组的值</button>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
text:{
name:'我的一',
age:21
},
array: [1,2,3,4,5]
},
methods:{
setHandel(){
this.text.name = '我是新的一'
},
setArray(){
/**
* 当我们想要更改数组中的值的时候，
* this.array[0] = '我是新一',是没有办法修改的
* 因为vue的数据双向绑定中，调用的是set和get函数，
* 但是在数组里面没有这二个函数
* 所以我们只能使用vue封装的$set和变异方法（也就是push啊。。。）
*/
this.$set(this.array,0,'我是新一')
}
},
watch: {
//watch监听器，只能监听第一次，
//也就是在监听对象的时候，虽然对象中的属性值发生了改变
//但对象的首地址没有改变，所以监听器认为没有改变数据
//当想要监听对象的时候，想要开启深度监听
//deep:true
text: {
handler:function () {
alert('监听到了')
},
deep:true
}
}
})
</script>