[JavaScript知识库]初学VUE3

• github tags https://github.com/vuejs/vue-next/release/tags/v3.0.0

Vue3带来了什么

• 打包减少 41%
• 初次渲染快55%、更新渲染快113%
• 内存减少54%

源码升级

• 使用proxy代替defineProperty
• 重写虚拟DOM的实现和tree-shaking
• 更好的支持typescript

新特性

• composition-api(组合API)

  • setUp
  • ref和reactive
  • watch和watchEffect

• 创建Vue3工程

  • vue-cli创建
    • vue -v> 4.5.0 以上
      • npm i -g @vue/cli

    • vue create projectName

  • vite
    • npm init vite-app projectName
    • npm i
    • npm run dev

区别

• import { createApp } from 'vue' 而不是VUE
• createApp(APP).mount('#app')
  • 返回一个对象，
• 组件中的模板结构可以没有根标签

composition-api

• setUp
  • vue3的一个新的配置项，是一个函数
  • 组件用到的 数据、方法、都要在setUp中
  • 返回值
    • 返回对象，可以直接在template中使用
    • 渲染函数
      • return () => h()
      • 只渲染h中的内容
  • 可以使用VUE2里面的配置，但是不建议使用
    • 在VUE2里面能正常读到VUE3的数据和方法
    • 在setUP中不能读出来VUE2的配置项
  • setUp 不能使用async
  • ref()
    • 使变量变为响应式数据
      • let name = ref('张三')
        • name是一个对象(引用实现对象=》 引用对象)
        • refImpl reference implement(实现)
          • _x暂时不理
          • value
            • 类似以前的data,但是将getter和setter放到了_data（原型链之中了）
        • 更改 name的值
          • name.value = 李四' 此时响应式更改
          • 在模板中不需要使用value
      • let obj = ref({q:1,w:2})
        • obj.value -> proxy {q:1,w:2}
      • 总结
        • 可以接收 基本类型、对象类型
        • 基本类型 响应式仍然是 Object.definePrperty()的get和set完成
        • 对象的数据类型： 内部求助于 reactive()函数
• reactive函数
  • 定义对象型响应式数据，不能处理基本数据类型
  • let obj = reactive({q:1,w:2})
    • 修改 obj.q = 2
  • let arr = reactive([1,2,3,4,5])
    • 修改 arr[0] = 10 可以直接通过索引修改
  • 总结
    • 返回一个 proxy 对象
    • 深层次的
    • 内部基于es6的Proxy

响应式原理

• Vue2
  • 对象
    • OBject.defineProperty() 对属性的读取、修改进行拦截（数据劫持）
  • 数组
    • 通过 7个变异函数更改数据
  • 缺陷
    • 新增属性不能监听到改变
    • 不能通过索引直接修改数据
• Vue3
  • 能够直接给对象添加属性 obj.x='1111'
  • 能够删除对象属性 delete obj.x
  • 能索引修改数组的值

  • 原理

window.proxy

const p = new Proxy(代理对象,{配置对象})
// 对p属性的修改都能被Proxy监听到（增删改查）
// p和代理对象都会同步更改
// 配置对象
  {
    // 读取时被使用
    get(target,被读取属性){
      // 响应式操作
      return target[name]
    },
    // target 是指代理对象

    // 在修改和新增时调用
    set(target，被修改属性，changeValue){
      // 响应式操作
      target[name] = changeValue
    },
    // 删除属性被调用
    deleteProperty(target,被删除的属性){
      return delete target[name]
    }
  }


  // 读取对象属性
  let obj = {q:1,w:2}
  // 基本读取
     obj.q
     obj.q = 3
  //  window.reflect
     reflect.get(obj,'q')
     reflect.set(obj,'q',2)

  // Object.defineProperty(操作对象，操作属性，值)
  // 重复的定义操作属性会有阻塞进程的错误

  // reflect。defineProperty(.,.,.)
  // 重复定义时会返回 false,表示操作不成功，且不阻塞进程
  // return target[name] 改为 return reflect.get(target,name)

ref和reactive

• 数据类型

  • ref 基本数据类型
  • reactive对象或者数组
  • ref也可以定义对象和数组，内部使用reactive

• 原理

  • ref
    • Object.defineProperty()
  • reactive
    • proxy 和 reflect

• 使用

• $attrs

  • $attrs和$listener

• $slot

setUp注意点

• 执行时机
  • 在beforeCreate 之前
  • 此时没有this(不能在setUp里面使用this)
• 参数
  • props
    • 要在 export defalt { props: [...]} 接受才能在 setUp() 中正常传参接受
  • context
    • 对象
      • attrs
        • 对象，父组件传递但是没有被props接受的属性
      • slots
        • 收到插槽的内容
      • emit
        • emits: ['接受emit的函数']
• 计算属性
  • 引入 import {computed} from 'vue
  • 使用

 person.fullName = computed(()=>{
  return person.firstName - person.lastName
})

// 完整写法
 person.fullName = computed({
   get(){},
   set(value){}
 })

• watch
  • 引用
  • 可以多个watch

// 监视ref定义的数据
watch(property,(newVal,oldValue)=>{
  // ...
},{配置}),
// 配置可以是 immediate: true,deep:true
watch([property1,property2],(newVal,oldValue)=>{
  // ...
})

// reactive 定义的响应数据，此时无法正确获取oldValue
// 暂时无法避免
// 强制开启了深度监视
watch(obj,(newVal,oldValue)=>{

})
// 只想监视对象的某一个属性，需要使用函数返回
watch(()=> obj.property,(newVal,oldValue)=>{

})

// 监视对象中的对象
watch(obj.obj1,(newVal,oldValue)=>{

},{deep:true})