vue3笔记

vue3

• 根标签可以是多个

• script 脚本里没有this

• 选项式和组合式

• Setup里直接定义变量，也可以在模板中使用， 只是不是响应式的，无法实时刷新页面

• ref既可以声明基本数据类型，又能声明对象数据类型 而reative只能声明对象数据类型

• ref 声明的对象类型，底层还是用 reactive 实现的

• reactive 定义的对象无法直接重新赋值，需要使用 Object.assign(obj,{a:1,b:2})
  而ref可以直接赋值新对象

Vue2
在给深层次的数据赋值或者给对象添加新的属性，页面上的数据并不会同步更新，
这是因为 Vue 2不能检测到对象属性的添加或者删除，所以vue不允许在已经定义好的数据上动态的添加新的属性值

解决方案： 使用 this.$set()

eg:   this.$set(item, 'checked', false)

• watch 监听 ref 定义的对象，监听里面的某个属性，需要开启深度监听， 而 reactive 定义的对象默认开始深度监听，且不可关闭
• 只想监听ref或reactive定义的对象中的某一个属性，需要写成函数返回一个值

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

• defineExpose 子组件暴露属性或者方法，给父组件使用
• 子组件先挂载完毕，父组件然后才挂载完毕
• 路由传参 子组件解构参数后，参数失去响应式 ——————> 应该用 toRefs 包裹 路由配置表 设置 props: true，
  可以把路由params参数当成 props 传参

Pinia
批量修改:

countStore.$patch({
  sum:999,
  school:'atguigu'
})

• storeToRefs 结构赋值 pinia里的数据
• 通过 store 的 $subscribe() 方法侦听 state 及其变化

 talkStore.$subscribe((mutate,state)=>{
   
     console.log('LoveTalk',mutate,state)  
   localStorage.setItem('talk',JSON.stringify(talkList.value))
   
   }) 

组件通信

1.props

2.自定义事件 emit defineEmits(‘test’)

3.mitt 发布订阅 使用mitt插件

4.provide inject
provide提供一个值，所有的后代组件都可以注入inject

5.$attrs

v-bind=‘$attrs’

$attrs会自动排除props中声明的属性

6.$refs 和 $parent

7.Pinia

8.Slot

• toRaw

  将响应式对象转换成原始对象，提交的时候可以用

• Teleport 传送

  将指定元素传送挂载到某一元素上

      <div class="modal" v-show="isShow">
        <h2>我是一个弹窗</h2>
        <p>我是弹窗中的一些内容</p>
        <button @click="isShow = false">关闭弹窗</button>
      </div> </teleport> ```