目次
1.計算されたプロパティ
直接出力するのではなく、変数を計算してから出力するときに変数を使用できることを願っています. 計算されたプロパティは、応答依存関係に基づいてキャッシュされます. 関連するリアクティブな依存関係が変更された場合にのみ再評価されます。関数を呼び出すたびに、関数が再実行されます。
計算されたプロパティは、Vue インスタンスの既存のプロパティを処理した後に計算または返される新しいプロパティであるため、計算されたプロパティは、補間構文で直接使用できるプロパティです。
<body>
<div id="app">
<input type="number" v-model.number="a">
<input type="number" v-model.number="b">
<!-- 直接使用插值语法读取计算属性 -->
{
{total}}
</div>
<script>
new Vue({
el:"#app",
data:{
a:0,
b:0,
// 计算属性不能写在这里
// total:0
},
computed:{
// 重新返回属性 主要是处理data中需要计算/处理的属性
// 1.计算属性完整写法
// total:{
// // get作用：当有人读取total时，get就会被调用，且返回值就作为total的值
// // get什么时候调用？1.初次读取total时 2.所依赖的数据发生改变时(即a或b发生改变时)
// get(){
// console.log('get被调用');
// return this.a + this.b
// },
// // set什么时候调用？当total被修改时
// set(value){
// console.log('set',value);
// }
// }
//--------------------------------------------------
// 2.计算属性简写形式(只考虑读取get，不考虑修改set时才能简写)
total(){
console.log('这是computed');
return this.a + this.b
}
},
})
</script>
</body>
計算とメソッドの違い
計算されたプロパティには依存キャッシュがあり、値が変更されない場合、計算されたプロパティは再度呼び出されません。メソッドにはキャッシュがなく、呼び出されるたびに再実行/レンダリングされます。
<body>
<div id="app">
{
{total}}
{
{total}}
{
{total}}
{
{str()}}
{
{str()}}
{
{str()}}
</div>
<script>
new Vue({
el:"#app",
data:{
a:0,
b:0
},
computed:{
total(){
console.log('这是computed');
return this.a + this.b
}
},
methods:{
str(){
console.log('这是methods');
}
}
})
</script>
</body>
2、監視プロパティを見る
リスナー プロパティは、listener/listener とも呼ばれます。
リスナーの使用は、データが変更されたときに非同期または高価な操作を実行する必要がある場合に最も役立ちます。
ほとんどの場合、計算されたプロパティの方が適切ですが、カスタム リスナーが必要になる場合もあります。そのため、Vue は watch オプションを介してデータの変更に応答するためのより一般的な方法を提供しています。このアプローチは、データ変更に対して非同期操作またはコストのかかる操作を実行する必要がある場合に最も役立ちます。
監視属性は、既存の属性を監視するために使用され、監視属性が変更されると、コールバック関数が自動的に呼び出され、関連する操作が実行されます。
監視属性を書き込む方法は 2 つあります。
(1) Vueインスタンスのwatch設定項目に書き込む
(2) vm.$watch() による監視
<body>
<div id="app">
<input type="number" v-model.number="a">
<input type="number" v-model.number="b">
{
{total}}
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
a: 0,
b: 0,
total: 0
},
watch: {
// 我们需要监听a和b属性 (也可以监听计算属性)
//1.完整写法
// a: {
// // handler是固定配置
// // handler什么时候调用？当a发生改变时调用
// // handler有两个参数，一个是修改后的值，一个是修改前的值
// handler(newValue, oldValue) {
// console.log('a被修改了', newValue, oldValue);
// this.total = this.a + this.b
// },
// // 其他配置项
// immediate: true //初始化时让handler调用一下
// }
//-------------------------------------------
// 2.简写
a(newVal, oldVal) {
console.log(newVal,oldVal,'这是监听器');
this.total = this.a + this.b
},
b() {
this.total = this.a + this.b
}
},
})
// 3.也可以使用vm.$watch(需要监听的属性,{配置项})实现监听
// vm.$watch('a',{
// handler(newValue,oldValue){
// console.log('a被修改了',newValue,oldValue);
// }
// })
</script>
</body>
深い監視
Vue のウォッチは、デフォルトではオブジェクトの内部値の変化を監視していませんが、deep:true を設定することで、より深い監視を実現できます。
<body>
<div id="app">
<input type="number" v-model="a">
<input type="number" v-model="b">
<input type="text" v-model="obj.name">
</div>
<script>
new Vue({
el: "#app",
data: {
a: 0,
b: 0,
total: 0,
obj: {
name: "zhangsan",
age: 12
}
},
watch: {
// 监听基本数据类型
a() {
console.log('a被改变了');
},
b: {
handler() {
console.log('b被改变了');
}
},
// 监听引用数据类型
obj: {
// 浅监听
handler(newValue, oldValue) {
console.log(newValue.name, oldValue.name);
},
// 递归监听 深度监听
deep: true
}
},
})
</script>
</body>ウォッチとコンピューテッドの違い
計算された
1. キャッシュ可能性により、ページの再レンダリング値は変更されず、計算されたプロパティは、関数を再度実行する必要なく、直前の計算結果をすぐに返します
2. 計算されたプロパティは、特定のプロパティの変化を計算します. 特定の値が変化した場合、計算されたプロパティは監視して返します.
時計
1. 値の変化を監視し、非同期操作を実行する (axios リクエスト)
2. キャッシュなし、現在の値が変更されたときのみ実行/応答