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",发送事件) 

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值