What are the points to note in Vue3 setup and what are the watch monitoring attributes?

1, setup instructions

1.1The execution time of setup

1.The execution time of setup is earlier than beforeCreate execution

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

1.2.steup parameters

setup parameters
1.props: The value is an object, including: properties passed from outside the component and received internally by the component

2.context :Context object
①attrs: The value is an object, including: attributes passed from outside the component but not declared in the props configuration, equivalent to this.$attrs

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

②slots: The received slot content is equivalent to this.$slots.

Define the slot in the App

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

Get the slot in the subcomponent

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

③emit: A function that distributes custom events, equivalent to this.$emit.

Write a custom event in the App and pass it to the component

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

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

Then go to the sub-component and use context.comit to get the custom event

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

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

It is consistent with the computed configuration function in 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,
      };
    },
  };

Second, watch monitoring attribute

There are two kinds of watches, namely Single attribute data monitoring, and multiple attribute data monitoring

The three parameters in watch are the monitored object, the monitored function, and the configuration of the monitored attribute

Monitoring the data defined by ref

①Monitoring attribute monitors a responsive value of ref

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

②Monitors multiple responsive data defined by ref

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

Monitors data defined by reactive

①Monitor changes in data defined by reactive

Data defined using reactive cannot correctly obtain newValue using watch
and deep monitoring will be forced to open

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

②Monitor certain attributes of the responsive data defined by reactive

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

③Monitor certain attributes of the responsive data defined by reactive

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

④Special Situation

Note: This situation monitors a certain attribute in the object defined by recative, so deep can turn on

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

The above is the detailed content of What are the points to note in Vue3 setup and what are the watch monitoring attributes?. For more information, please follow other related articles on the PHP Chinese website!