[JavaScript知识库]Vue3基础知识

目录

一、Vue3特点

二、vue3启动方式

三、vue3优点

四、setup组合api

五、响应式数据

ref

reactive

六、computed计算

七、watch

八、生命周期

九、setup(props,ctx)

十、组件传递

十一、跨层传参

十二、setup中的this

十三、自定义set返回一个函数

?about.vue

child.vue

一、Vue3特点

? ? ? ? vue3基本兼容vue2代码

二、vue3启动方式

//vue3启动方法
var app = createApp(App);
app.use(router).use(store).mount("#app")

全局方法的定义：

app.config.globalProperties.$mysay = function( ){ }

三、vue3优点

1. 语义明确
2. 书写简洁
3. 阅读直观，不需要通过Vue再编译
4. 复用，低耦合性更强(没有this)
5. 和react hooks 异曲同工
6. vue3.0 按需加载

import {ref,reactive} from 'vue

四、setup组合api

• 在beforecreated之前调用
• 里面的this不是当前的实例
• ref 定义值类型数据
• reative 定义引用类型的数据

//引入

import {ref,reative} from 'vue'
set(){
const num = ref(5);
const list = reative(["vue","react",""angular])
return {num,list}
}

//使用
{{num}}
<p v-for="item in list">

五、响应式数据

ref

• const num = ref(0)
• return {num}
• 使用：<tag>{{num}}</tag>

reactive

• 引用数据类型
• const list = reactive([xxx,yyy])
• const obj = reactive({name:"beibei",age:18})

六、computed计算

const rmsg = computed(()=>num.value.split('').reverse().join(''))

const counter = computed({
? ? ? ? set:v=>num.value+=1,

? ? ? ? get:()=>num.value
})

七、watch

watchEffect监听

const stop = watchEffect(()=>{

? ? ? ? console.log(num.value)

? ? ? ? localstorage.setItem("name",num.value.toString())

})

watch监听单个对象

watch(num,(num,preNum)=>{

})

watch(()=>list[0],(value,preValue)=>{

})

八、生命周期

beforeCreate
create==setup

onMount,onMounted,onUpdate,onUpdated,

和vue2生命周期一样，加个on

九、setup(props,ctx)

• props传递过来的属性
• ctx|content上下文

1. ctx.attrs 属性
2. ctx.slots 插槽
3. ctx.parent 父组件
4. ctx.root 根组件
5. ctx.emit 发送事件
6. ctx.refs dom节点

十、组件传递

父传子props

子传父emit发送事件

十一、跨层传参

import mitt from 'mitt'

const emitter = mitt()

export default emitter;

mitter.emit("hi","我是跨层数据")

mitter.on("hi",e=>console.log(e))

十二、setup中的this

import {getCurrentInstance} from 'vue'

const app =??getCurrentInstance().appContext

//app是当前的实例

getCurrentInstance只能在setup或生命周期钩子中调用?

十三、自定义set返回一个函数

?import {reverseText} from './reverseText.js'

const {elem,getElem} = reverseText();

return {elem,getItem}

使用：

<p ref=""elem>我爱我的祖国</p>

?about.vue

<Child:mynum="num">

给组件child传递参数mynum

<Child:mynum="num" @fee="sendSon($event)">

child.vue

props:{mynum:{}} 接受

setup(props,ctx){

}

props获取

watch(props,(nval,oval){})

监听props变化

ctx.emit("fee",发送事件)?