【Vue3】パラメータを詳しく設定！計算されたコンピューティング プロパティと監視モニタリング プロパティ

セットアップの詳細！

• ステップ実行のタイミング、beforeCreateの前に1回実行、これは利用不可、未定
  

セットアップパラメータ、stup(props、context)

パラメータ 1.props、親コンポーネントによって渡された値を受け取る役割を果たします。

• props で宣言しない場合、出力される props は空になります。
  
  

パラメータ 2. コンテキスト

• まず印刷されたコンテキストを確認します
• 

context.attrs

• 1. 親コンポーネントによって渡されるパラメータの宣言に props が使用されていない場合、出力される props は空になりますが、このパラメータは context.attrs に存在します。
  

context.emit

• 子コンポーネントが親コンポーネント上でクリックされたときに、子が親に渡すようにトリガーしたい場合は、 context.emit('親コンポーネントのイベント名'、渡されたパラメータ) を使用する必要があります。
• 親コンポーネント上で
  
• サブコンポーネントについて
  
  
  

context.slots、スロット¶

• サブコンポーネントを出力します。赤い丸は値を表します。

setup(props, context) {
    
    
    console.log(context.slots); //相当于Vue2中的$attrs
    return {
    
    
    };
  },

• 子コンポーネントで使用される

 <slot name='chacao'></slot>

Vue2の小道具

• 親コンポーネントが値を渡すとき

<childer :msg='msg' :name='name'></childer>

• サブコンポーネントが受信すると、受信した値は VC 上にあり、$attrs はありません。

props:['msg','name']

• 子コンポーネントが受信しない場合、受信した値は $attrs にあります

計算された計算されたプロパティ

• Vue3で直接使うこともできますが、直接使っても問題ありません
• 直接書かれたもの:
  

Vue3の書き方

• 最初に紹介する

単純な書き方で、計算されたプロパティの値を変更するとエラーが報告されます。

import {
    
     reactive,computed} from 'vue';

書き込みを完了すると、計算されたプロパティを変更できます

<template>
  <!-- VUE3组件中的模板结构可以没有根标签 -->
  <view>姓<input type="text" v-model="parems.name" /></view><br /><br />
  <view>名<input type="text" v-model="parems.lastname" /></view>
  <div class="fullname">全名： {
    
    {
    
     parems.fullname }}</div>
  <div class="fullname">全名修改：<input type="text" v-model="parems.fullname" name="" id=""></div>

</template>

<script>
import {
    
     reactive, computed } from "vue";
export default {
    
    
  name: "Demo",
  setup(props, context) {
    
    
    let parems = reactive({
    
    
      name: "乞力马扎",
      lastname: "罗",
    });
    // 计算属性-简写，没有考虑计算属性被修改的情况
    // parems.fullname = computed(() => {
    
    
    //   return parems.name +'-'+ parems.lastname;
    // });
    //计算属性，考虑读写情况
    parems.fullname = computed({
    
    
      get(){
    
    
        return parems.name +'-'+ parems.lastname;
      },
      set(value){
    
    
        const newname=value.split('-')
        parems.name=newname[0]
        parems.lastname=newname[1]
      }
    });
    return {
    
    
      parems,
    };
  },
};
</script>

<style>
</style>

監視監視プロパティ

• Vue2の書き方
• 速記

   //简单写法
    sum(newvalue, oldvalue) {
    
    
      console.log(newvalue, oldvalue);
    },

• 複雑な文章

 sum:{
    
    
      immediate:true,//上来立即监听一次
      deep:true,//深度监听
      handler(newvalue, oldvalue){
    
    
        console.log(newvalue, oldvalue);
      },
    }

Vue3の書き方

• reactive で定義された複数の応答データを監視すると、ここで oldvalue が正しく監視できないことがわかります
• Vue3 によるリアクティブな応答データの監視により、詳細な監視が強制的に有効になります (詳細な設定は無効です)。
• reactive で定義されたレスポンシブ データ内のオブジェクトの特定の属性を監視する場合は、deep を追加する必要があり、現時点では deep が有効です

ref で定義された応答性の高いデータを監視するには、.value を追加する必要はありません。追加すると、監視するデータは応答性になります。

<script>
import {
    
     reactive, watch, ref } from "vue";
export default {
    
    
  name: "Demo",
  setup(props, context) {
    
    
    let sum =ref(0)
    let parems = reactive({
    
    
      name: "乞力马扎",
      lastname: "罗",
      sum: 0,
      job:{
    
    
        a:1,
        b:2
      }
    });
    watch(sum,(newvalue,oldvalue)=>{
    
    
      console.log(newvalue,oldvalue)
    })
    return {
    
    
      sum,
      parems,
    };
  },
};
</script>

ref で定義された複数の応答データを監視する

<script>
import {
    
     reactive, watch, ref } from "vue";
export default {
    
    
  name: "Demo",
  setup(props, context) {
    
    
    let sum =ref(0)
    let sum2 =ref(0)

    let parems = reactive({
    
    
      name: "乞力马扎",
      lastname: "罗",
      sum: 0,
    });
    watch([sum,sum2],(newvalue,oldvalue)=>{
    
    //参数1数组监视的谁，参数2，监视的方法回调，参数3监视的对象配置
      console.log(newvalue,oldvalue)
    },{
    
    immediate:true})
    return {
    
    
      sum,
      sum2,
      parems,
    };
  },
};
</script>

reactive で定義されたレスポンシブ データのすべての属性を監視すると、ここでは oldvalue が正しく監視できないことがわかります。

<script>
import {
    
     reactive, watch, ref } from "vue";
export default {
    
    
  name: "Demo",
  setup(props, context) {
    
    
    let sum =ref(0)
    let sum2 =ref(0)

    let parems = reactive({
    
    
      name: "乞力马扎",
      lastname: "罗",
      sum: 0,
    });
    //监视reactive所定义的多个响应式数据,发现此处无法正确监听oldvalue
    watch(parems,(newvalue,oldvalue)=>{
    
    
       console.log(newvalue,oldvalue)
    })
    return {
    
    
      sum,
      sum2,
      parems,
    };
  },
};
</script>

リアクティブで定義されたレスポンシブデータ内の特定の属性を監視する（誤った書き込みと正しい書き込み）

reactive で定義されたレスポンシブ データ内の複数の基本的な類似属性を監視します

reactive で定義されたレスポンシブ データ内のオブジェクトの特定の属性を監視する場合は、deep を追加する必要があり、現時点では deep が有効です

WatchEffect関数

• Watch: モニターのプロパティだけでなく、モニターのコールバックも指定する必要があります
• WatchEffec: ref の定義と同様に、どの属性を監視するか、どの属性を監視コールバックで使用するか、次にどの属性を監視するかを指定する必要はありません。つまり、.value を使用します。
• computed 計算プロパティ: と似ていますが、computed には戻り値 return が必要ですが、WatchEffec には戻り値は必要ありません。

<template>
  <!-- VUE3组件中的模板结构可以没有根标签 -->
  <view>姓<input type="text" v-model="parems.name" /></view><br /><br />
  <view>名<input type="text" v-model="parems.lastname" /></view>
  <view>{
    
    {
    
     sum }}</view>
  <button @click="sum++">sum++</button>
</template>

<script>
import {
    
     reactive, watch, ref, watchEffect } from "vue";
export default {
    
    
  name: "Demo",
  setup(props, context) {
    
    
    let sum = ref(0);
    let parems = reactive({
    
    
      name: "乞力马扎",
      lastname: "罗",
      sum: 0,
      job: {
    
    
        a: 1,
        b: 2,
      },
    });
    //监听
    watch(
      parems,
      (newvalue, oldvalue) => {
    
    
        console.log(newvalue, oldvalue);
      },
      {
    
     deep: true }
    );
    //监视
    watchEffect(() => {
    
    
      console.log("执行");
      const name = sum.value
    });
    return {
    
    
      sum,
      parems,
    };
  },
};
</script>

<style>
</style>