Vue3 설정에서 주의할 점은 무엇이며 시계 모니터링 속성은 무엇입니까?

첫 번째, 설정 지침

1.1 설정 실행 시간

1. 설정 실행 시간은 beforeCreate 실행

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

1.2.steup 매개변수

설정 매개변수
1.props보다 빠릅니다. 객체, Contains: 구성 요소 외부에서 전달되고 구성 요소 내에서 수신된 속성

2.context: 컨텍스트 객체
①attrs: 값은 다음을 포함하는 객체입니다. 구성 요소 외부에서 전달되었지만 선언되지 않았습니다. 소품 구성에서 < code>this.$attrsthis.$attrs

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

②slots: 收到的插槽内容,相当于 this.$slots。

在App中定义插槽

<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>

②slots: 수신된 슬롯 콘텐츠는 this.$slots와 동일합니다.

앱에서 슬롯 정의

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

하위 구성 요소에서 슬롯 가져오기

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

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

3emit: 커스텀 이벤트를 배포하는 함수로 this.$emit와 동일합니다.

앱에서 맞춤 이벤트를 작성하고 이를 구성 요소에 전달합니다

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,
      };
    },
  };

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

그런 다음 하위 구성 요소로 이동하여 context.comit을 사용하여 맞춤 이벤트를 가져옵니다

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

Vue2의 계산된 구성 기능

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

둘째, 시계 모니터링 속성에는 두 가지 유형의 시계가 있습니다

, 즉 단일 속성 데이터 모니터링과 다중 속성 데이터 모니터링
watch의 세 가지 매개변수는 모니터링되는 개체, 모니터링되는 기능 및 ref

로 정의된 데이터를 모니터링합니다. ①ref

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

의 반응형 값을 모니터링하기 위해 속성을 모니터링합니다. ②ref

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

로 정의된 여러 반응형 데이터를 모니터링합니다.

Reactive

로 정의된 데이터를 모니터링합니다. 리액티브 정의 데이터의 변경

🎜🎜Reactive를 사용하여 정의된 데이터는 watch🎜🎜🎜를 사용하여 newValue를 올바르게 얻을 수 없으며 심층 모니터링이 강제로 열리게 됩니다.🎜🎜

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

🎜②Reactive🎜rrreee🎜3에서 정의한 반응형 데이터의 특정 속성을 모니터링합니다. 반응형🎜rrreee에 의해 정의된 반응형 데이터의 속성🎜4특수 상황🎜🎜참고: 이 상황은 반응형으로 정의된 객체의 특정 속성을 모니터링하므로 deep을 켤 수 있습니다🎜rrreee

위 내용은 Vue3 설정에서 주의할 점은 무엇이며 시계 모니터링 속성은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!