Vue3部分学习笔记

1，setup语法糖使用
注意：在setup()中不能有this
在setup中你应该避免使用 " this "， 因为它不会找到组件实例，“setup” 调用发生在 " data " property,“computed”, property 或 " methods"被解析之前，所以它们无法在 "setup"中获取，这也是为了避免setup()和其他选项式API混淆
setup(高级用法)，推荐使用

<script setup lang="ts">
const props = defineProps({
        title:{
        type:String,
        default:()=>{
        reuturn "测试信息"
        }
        }
})
</script>

注意：使用setup()后，在引入组件时可以直接使用，不需要对引入组件进行注册
2，defineProps和defineEmits
注意：defineProprs和defineEmits都只是在

// 子组件
<template>
<p>{props.msg}</p>
<buttom @click="handleClick"></buttom>
</template>
<script setup lang="ts">
const props = defineProps({
        msg:{
           type: String,
           default:()=>"默认值"
              }
})
const emit =defineEmits['no-change","update"]
const handleClick =()=>{
emit("on-change","父组件方法被调用了")
}
</script>
// 父组件
<script setup lang="ts">
import TestPropsPmit from './comps/test-props-emit/index.vue'
import{ref} from 'vue'
const msg =ref('欢迎使用vite!')
const handleChang =(params:string)=>{
console.log(parmas)
}
</script>

3,defineExpose属性的应用
使用

<script setup lang="ts">
function testChild():void{
      console.log('子组件的testChild被调用了')
}
const b =ref(2);
//统一暴露属性
defineExpose({
        obj:{
          name: '张三'，
          age:2000
        },
        b,
        testChild
})
</script>

4,正确定义变量（字符串，对象，数组）
示例代码：

<template>
// 使用实例，方法使用变量也类似
<p>{originDate.count}</p>
</template>

<script setup lang="ts">
import {ref ,reactive } from 'vue';
const count = ref(0);
const user = reactive({name:'张三'})
const arr = reactive([1,2,3,4])
// 综合定义方法
const originData = react({
conut: 0.
user:{![在这里插入图片描述](https://img-blog.csdnimg.cn/738b4249c5814a28882a656e9aea85a2.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAamFjayZjb2Rl,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

   name:'张三'
}，
  arr:[1,2,3,4]
})
</script>

5，watch与watchEffect比较，推荐watch监听
A：wacth和watchEffect比较都懒执行副作用，不过watchEffect比较频繁，在vue组件更新之前执行
B：watch更具体说明什么状态应该触发侦听器重新执行，watchEffect就没有那么友好
C：watch访问侦听状态变化前后的值
代码示例

// 监听多个值,单个值就跟vue2一样
watch([count,originData.user],(n,o)=>{
console.log(n[0],n[1]);
})
// 立即监听
watch([count,originData.user],(n,o)=>{
console.log(n[0],n[1]);
}，{deep:true, immgiate:true})

6，在setup中的生命周期钩子