setup细讲!

• step执行的时机，在beforeCreate之前执行一次，this是没有的，是undetined
  

setup参数，steup（props，context）

参数1.props，负责接收父组件传过来的值

• 如果不拿props声明，则打印的props为空
  
  

参数2.context

• 先看一下打印的context
• 

context.attrs

• 1,当不拿props声明父组件传过来的参数，则打印的props为空，但是context.attrs中就会有这个参数
  

context.emit

• 当父组件上点击子组件，想触发子传父，需要用到context.emit(‘父组件的事件名’，传的参数)
• 父组件上
  
• 子组件上
  
  
  

context.slots， 插槽

• 子组件打印一下，红色圈住的代表有值，

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

• 子组件上使用

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

Vue2的 props

• 当父组件传值

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

• 当子组件接收,接收的值在VC上,$attrs上就没有了

props:['msg','name']

• 当子组件不接收,接收的值在$attrs上

computed计算属性

• Vue3中也能直接用，但不介意直接用
• 直接用写法：
  

Vue3写法

• 先引入

简便写法，修改计算属性的值会报错

import { reactive,computed} from 'vue';

完整写法，可以修改计算属性

<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监听属性

• Vue2写法
• 简便写法

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

• 复杂写法

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

Vue3写法

• 监视reactive所定义的多个响应式数据，发现此处无法正确监听oldvalue
• Vue3的监听reactive的响应式数据会强制开启深度监听（deep配置无效）
• 监视reactive所定义的一个响应式数据中的对象中的某个属性时候，就得加上deep，此时deep有效

监视ref所定义的一个响应式数据，不用加.value,一但加上，监听的就是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>

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

监视reactive所定义的一个响应式数据的全部属性，发现此处无法正确监听oldvalue

<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所定义的多个响应式数据,发现此处无法正确监听oldvaluewatch(parems,(newvalue,oldvalue)=>{console.log(newvalue,oldvalue)})return {sum,sum2,parems,};},
};
</script>

监视reactive所定义的一个响应式数据中的某个属性（错误写法和正确写法）

监视reactive所定义的一个响应式数据中的多个基本类似属性

监视reactive所定义的一个响应式数据中的对象中的某个属性时候，就得加上deep，此时deep有效

WatchEffec函数

• Watch：既要指明监听的属性，也要指明监视的回调
• WatchEffec：不用指明监视的哪个属性，监视的回调中用到哪个属性，那就监视哪个属性，类似ref定义的，就是.value使用
• 类似computed计算属性：，但是computed必须得有返回值return，WatchEffec则不需要返回值

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