vue3小笔记

 

一.创建vue3确保vuee-cli是4.5版本以上

二.vue3在main.js中的引入与vue2不同

import {createApp } from 'vue'

import App from './App.vue'

createApp(App).mount('#app')

三.sutpu是一个函数，把变量，方法，以前的勾子函数都放里面

• async在没在使用Suspense组件时是不能出现在sustpu中的
• template下可以不用加div根标签
• vue3的方法变量都写到setpu函数体内
• vue3也可以使用vue2的配置，vue2能读取vue3的数据 ，用this.（vue3返回的数据）
• vue3的setpu不能读取vue2的数据
• vue3和vue2不要混用
• vue3和vue2名相同 setpu优先

• setup执行的时机

  • 在beforeCreate之前执行一次，this是undefined。

• setup的参数

  • props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。

  • context：上下文对象

    • attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。

    • slots: 收到的插槽内容, 相当于 this.$slots。

    • emit: 分发自定义事件的函数, 相当于 this.$emit。

四.ref 给基本类型做数据响应式用的

基本数据类型想要数据响应式，也就是在setpu里改了数据，想要模版也跟着变的话就要使用到ref

• 先要引入 import { ref } from 'vue'
• 把基本数据类型放到ret方法里 如：let name=ref("张三“）
• 在setpu上改的放要加个value 如，name.value='李四'
• 改了之后在模版上就不用加value,直接{ {name}}
• 通过Object.defineProperty()的get和set来实现响应式

想要用ref方法包对象类型 做数据响应式

• 在setpu上修改就要obj.value.name='李四'
• 但是只调用第一层的数据，再下一层还是对象就不能再修改了

五.reactive 给对象类型做数据响应式用的

定义一个对象类型的响应式数据,处理不了基本类型的（基本类型用ref)

• 先要引入ref import { reactive } from 'vue'
• js处理数据不用加.value
• 可以监测到深层的对象
• 对数组类型也能监测，
• 基本数据要使用可以包装成一个对象再用reactiove()
• 原理是用了proxy代理，还通过了windom身上的Reflect反射

• new Proxy(data, {
  	// 拦截读取属性值
      get (target, prop) {
      	return Reflect.get(target, prop)
      },
      // 拦截设置属性值或添加新属性
      set (target, prop, value) {
      	return Reflect.set(target, prop, value)
      },