Vue3セットアップの注意点と監視監視属性とは何ですか?

1、セットアップ手順

1.1セットアップの実行時間

1.セットアップの実行時間が以前よりも早くなります作成実行

  export default {
    name: "Demo",
    beforeCreate(){
      console.log('beforeCreate已执行');
    },
    setup() {
      console.log('setup已执行');
      let person = reactive({
        name: "小明",
        age: 20,
      });
      return {
        person,
      };
    },
  };

1.2.steupparameters

setupparameters
1.props: 値は、コンポーネントの外部から渡され、コンポーネントによって内部的に受信されるプロパティを含むオブジェクトです。

2 context :Context object
①attrs: 値は、コンポーネントの外部から渡されるが、props 設定で宣言されていない属性を含むオブジェクトです。this.$attrs

  export default {
    name: "Demo",
    props:['msg','age'],
    setup(props) {
      console.log(props);
      let person = reactive({
        name: "小明",
        age: 20,
      });   
      return {
        person,
      };
    },
  };

に相当します。

②slots: 受信したスロットの内容は this.$slots と同等です。

#アプリでスロットを定義します

<template v-slot:qwe>
<span>123</span>
</template>
<template v-slot:ewq>
<span>321</span>
</template>

サブコンポーネントでスロットを取得します

 console.log(context.slots); // 得到插槽

#③emit: カスタムイベントを配布する関数。

this.$emit

に相当します。

アプリでカスタム イベントを作成し、コンポーネントに渡します

<Demo @hi="Hello" msg="山鱼" age=10>
</Demo>

  setup() {
    function Hello(){
      console.log('你好！');
    }
    return {
      Hello
    }
  }

次に、サブコンポーネントに移動し、context.comit を使用してカスタム イベント

 function point(){
        context.emit('hi',666)
      }     
5TgxPT2v-1681788304084)]

```js
 function point(){
        context.emit('hi',666)
      }

Vue2 の計算された構成関数と一致しています

import { reactive,computed} from "vue";
  export default {
    name: "Demo",
    setup() {
      let person = reactive({
        firstName: "小",
        lastName: "明",
      }); 
      // 计算属性的简写形式，不考虑修改，是只读的
      /*person.fullName= computed(()=>{
        return person.firstName+'-'+person.lastName
      }) */
      // 计算属性的完整形式（可以读改）
      person.fullName= computed({
        get(){
          return person.firstName +'-'+person.lastName
        },
        set(value){
          const arr = value.split('-')
          person.firstName = arr[0]
          person.lastName = arr[1]
        }
      })
      return {
        person,
      };
    },
  };

2 番目に、モニタリング属性を監視します

監視には、単一属性データ監視と複数属性データ監視の 2 種類があります。

監視の 3 つのパラメータは、監視対象オブジェクト、監視対象関数、および監視対象属性の構成です。

ref で定義されたデータを監視

#①監視属性は ref

    watch(sum, (newvalue, oldvalue) => {
      console.log('当前值为'+newvalue, '以前值为'+oldvalue);
    });

の応答値を監視します②ref

        watch([sum,msg], (newvalue, oldvalue) => {
      console.log('当前值为'+newvalue, '以前值为'+oldvalue);
    });

で定義された複数の応答データを監視しますreactive

#で定義されたデータを監視します##①reactive で定義されたデータの変更を監視する

reactive で定義されたデータは watch

を使用して newValue を正しく取得できず、詳細な監視が強制的に開かれます

             watch(person,(newValue, oldValue) => {
                console.log('person变化了',newValue,oldValue)
             })

②reactive で定義された応答データの特定の属性を監視します

            watch(()=>person.name,(newValue,oldValue)=>{
               console.log('person.name发生了变化',newValue,oldValue)
           })

③reactive で定義された応答データの特定の属性を監視します

watch([()=>{person.age},()=>{person.name}],(newValue,oldValue)=>{
                console.log('person.name发生了变化',newValue,oldValue)
            })

④特別な状況

注: これは状況は、recative で定義されたオブジェクト内の特定の属性を監視するため、ディープで

#

 watch(()=>person.job,(newValue,oldValue)=>{
                console.log('person.name发生了变化',newValue,oldValue)
            }, {deep: true})

をオンにすることができます

以上がVue3セットアップの注意点と監視監視属性とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。