[Vue3] Setup parameters in detail! Computed computing properties and watch monitoring properties

Setup details!

• The timing of step execution, execute once before beforeCreate, this is not available, it is undetined
  

setup parameter, steup(props, context)

Parameter 1.props, responsible for receiving the value passed by the parent component

• If you do not declare with props, the printed props will be empty
  
  

Parameter 2. context

• First look at the printed context
• 

context.attrs

• 1. When props are not used to declare the parameters passed by the parent component, the printed props will be empty, but there will be this parameter in context.attrs
  

context.emit

• When the child component is clicked on the parent component, if you want to trigger the child to pass to the parent, you need to use context.emit('the event name of the parent component', the passed parameter)
• on the parent component
  
• on subcomponents
  
  
  

context.slots, slots¶

• Print the subcomponents, the red circles represent values,

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

• used on child components

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

Vue2 props

• When the parent component passes a value

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

• When the subcomponent receives, the received value is on the VC, and there is no $attrs

props:['msg','name']

• When the child component does not receive, the received value is on $attrs

computed computed property

• It can also be used directly in Vue3, but I don’t mind using it directly
• Directly written:
  

Vue3 writing method

• introduce first

Simple way of writing, modifying the value of the calculated property will report an error

import {
    
     reactive,computed} from 'vue';

Complete writing, you can modify the calculated property

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

watch monitoring properties

• Vue2 writing method
• shorthand

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

• Complicated writing

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

Vue3 writing method

• Monitor multiple responsive data defined by reactive, and find that oldvalue cannot be monitored correctly here
• Vue3's monitoring of reactive response data will force deep monitoring to be enabled (deep configuration is invalid)
• When monitoring a certain attribute in an object in a responsive data defined by reactive, you must add deep, and deep is valid at this time

To monitor a responsive data defined by ref, you don’t need to add .value, once you add it, what you monitor is reactive

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

Monitor multiple responsive data defined by 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>

Monitor all attributes of a responsive data defined by reactive, and find that oldvalue cannot be monitored correctly here

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

Monitor a certain attribute in a responsive data defined by reactive (wrong and correct writing)

Monitor multiple basic similar attributes in a responsive data defined by reactive

When monitoring a certain attribute in an object in a responsive data defined by reactive, you must add deep, and deep is valid at this time

WatchEffect function

• Watch: It is necessary to specify not only the properties of the monitor, but also the callback of the monitor
• WatchEffec: It is not necessary to specify which attribute to monitor, which attribute is used in the monitoring callback, then which attribute to monitor, similar to the definition of ref, that is, use .value
• Similar to computed calculation property:, but computed must have a return value return, WatchEffec does not need a return value

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