在vue官网发布3.x之前,小编前端时间正好学了react基础。当学vue3.x的时候,发现好多新特性都是借鉴react的hooks特性,这也对学习vue3.x的更容易一些。所以小编推荐有时间看看react,对你的学习vue3.x的学习也会更容易一些呦~
言归正传:vue3.x新特性
重点来啦:vue2.x & vue3.0语法差异分析
template,style----机会没有什么差异
script的vue2.x和vue3.x的对比
vue2.x
data() { return {} }
实现响应式
vue3.x
import { reactive } from 'vue'
setup (props) {
const state = reactive({
title: 'Hello Vue3.0'
})
return state
}
实现响应式
setup (props) {
const state = reactive({
title: 'Hello Vue3.0'
})
return { ...toRefs(state), xxx }
}
vue2.x
methods: { 方法 }
vue3.x
return {
...toRefs(state),
play
}
vue2.x
computed: {计算属性}
vue3.x
const getDoubleNum = computed(() => state.num * 2)
const state = reactive({
myName: computed(() => 'my name is HuangWei --- vue3.x')
})
注意:需要从vue包中导入 computed 函数,如果是写在setup函数中,最后return的时候,返回计算属性函数
vue2.x
created、mounted、beforeDestory、Destoryed ... 和 data同级
vue3.x
写在setup函数中,onCreated、onMounted、onBeforeUnmount、onUnmounted ...
对比
beforeCreate-> 使用 setup()
created-> 使用setup()
beforeMount -> onBeforeMount
Mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestory ->onBeforeDestory
destoryed -> onDestoryed
vue2.x
父传子:props
子传父:this.$emit
兄弟组件传值: 公共bus,父组件作为中间件
vue3.x
父传子(爷孙传,多级之间可传值)
父组件:provide---provide('名字',值)
子组件:inject----inject('名字')
代码如下:
父组件:
- {
{stu.name}}-{
{stu.age}}