setup

Setup

This is the entry point to the Composition API in VuE3, which is the beginning of vuE3

  • Execution time

    Execute before beforeCreate, so this is not available and is undefined

  • parameter

    Accepts two parameters, props and context

    • Props — Something passed by external components

      Values are objects that contain properties that are passed in from outside the component and declared to be received inside the component

    • Context — Context object

      • Attrs: An object containing properties passed in from the component but not declared in the props configuration, equivalent to this.$attrs in vue2

      • Slots: The content of the received slots, equivalent to this.$slots

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

        To use it, use context.emit(‘xx’, value)

        You also need to declare this in setup: emits:[‘xx’]

        emits: ['hello'].setup(props, context) {
    function hello(){
      context.emit('hello'.Awesome!)}return {hello}
  }
Copy the code

The watch function in setup

// Three parametersWatch (params, handler (new, old), {immediate:true.deep:true})
Copy the code
  • Params: Monitoring properties
  • Handler () : Callback function
  • Immediate and deep configuration items

Two small pit

  • monitoringreactiveWhen defining reactive data,oldValueCould not get it correctly, and deep monitoring was forcibly enabled, anddeepConfiguration failure
  • monitoringreactiveWhen an attribute (also an object) is defined in reactive data,deepThe configuration of

Therefore, if you want to get the oldValue of a variable separately, you need to use the variable separatelyrefDefine!

export default {
  setup() {
    let sum = ref(0);
    let msg = ref('hello, ding')
    let person = reactive({
      name: 'lijing'.age: 18.job: {
        j1: {
          salary: 20}}})// Monitor a reactive data defined by ref
    watch(sum, (newValue, oldValue) = > {
      console.log('sum changed', newValue, oldValue);
    }, {immediate: true})

    // Monitor multiple reactive data defined by ref, where newValue and oldValue are arrays
    watch([sum,msg], (newValue, oldValue) = > {
      console.log(newValue);
      console.log(oldValue);
    })

    // Monitor reactive data defined by Reactive
    // Note :1. OldValue cannot be obtained correctly
    // Note :2. Deep monitoring is forcibly enabled, even if deep is set to false
    watch(person, (newValue, oldValue) = > {
      console.log('person information changed! ', newValue, oldValue);
    }, {deep: false})// The deep configuration here is invalid

    // Monitor a property in reactive data defined by Reactive
    // You can't write person.age directly, you need to write it as a function
    watch(() = > person.age, (newValue, oldValue) = > {
      console.log('person age changed! ', newValue, oldValue);
    }, {deep: false})

    // Monitor some properties in reactive data defined by Reactive. Write an array in case 2
    watch([() = > person.age, () = > person.name], (newValue, oldValue) = > {
      console.log('person name age changed! ', newValue, oldValue);
    })

    // Case 6 special circumstances
    watch(() = > person.job, (newValue, oldValue) = > {
      console.log('person job changed! ', newValue, oldValue);
    }, {deep: true})// An object attribute in the object defined by Reactive must have a deep configuration, otherwise it will not be valid

    return {sum, msg, person}
  }
}
Copy the code

Note: When using ref to define object data, there are two ways to monitor objects:. Value or enable deep monitoring

But I still can’t get oldValue

export default {
  setup() {
    let person = ref({
      name: 'lijing'.age: 18.job: {
        j1: {
          salary: 20}}})// Use. Value to monitor the value of the RefImpl object, which is a proxy object
    watch(person.value, (newValue, oldValue) = > {
      console.log('person information changed! ', newValue, oldValue);
    }, {deep: false})// The deep configuration here is invalid

    // Method 2: Enable depth monitoring
    watch(person, (newValue, oldValue) = > {
      console.log('person age changed! ', newValue, oldValue);
    }, {deep: true})

    return {person}
  }
}
Copy the code

watchEffect

I don’t say I spy on anyone, I spy on anyone I use!

export default {
  setup() {
    xxxx

    watchEffect(() = > {
      // Monitor who is used here, logic will go through
    })

    return {person}
  }
}
Copy the code

Differences between watchEffect and Computed:

  • Computed: If you care about computed values, the callback function has a return value that you must write to
  • WatchEffect: The focus is more on the procedure, the body of the callback function, and the return value is not required

Three, computed functions in setup

The configurations are the same as those in VUe2

setup(){   
// Short form of the computed property
    let fullName = computed(() = > {
      return person.firstName + The '-' + person.lastName;
    })
    // The full way to calculate attributes
    let fullName1 = computed({
      get(){
        return person.firstName + The '-' + person.lastName;
      },
      set(value){
        const nameArr = value.split(The '-');
        person.firstName = nameArr[0];
        person.lastName = nameArr[1]; }})}Copy the code