Vue3入门
-
根实例初始化不同
-
2.x中通过
new Vue()
的方法来初始化-
import App from './App.vue' new Vue({ store, render:h => h(App) }).$mount('#app')
-
-
3.x中vue不再是一个构造函数,通过
createApp
方法初始化-
import App from './App.vue' createApp(App).use(store).mount('#app')
-
-
-
ref或者reactive代替了data中的变量:
-
在2.x中通过组件data的方法来定义一些当前组件需要的数据:
-
data(){ return{ name:'test', list:[] } }
-
-
在3.x中通过ref或者reactive创建响应式对象:
-
import {ref,reactive} from 'vue' setup(){ //在setup中去定义参数,然后return出去 const name = ref('test') const state = reactive({ list:[] }) return { name, state } } ref将给定的值创建一个响应式的数据对象并复制初始值(int/string),reactive可以直接定义复杂的响应式对象
-
-
-
methods中定义的方法也可以写在setup中
-
在2.x中methods来定义一些当前组件内部方法
-
methods:{ getData(){ // }, }
-
-
在3.x中直接在setup方法中定义并return
-
setup(){ const getData = ()=>{ console.log('getData') } return{ getData } }
-
-
-
不能使用EventBus
-
在2.x中通过EventBus的方法来实现组件通信
-
var EventBus = new Vue() Vue.prototype.$EventBus = EventBus this.$EvenetBus.$on() this.$EventBus.$emit()
-
-
在3.x中移除了 o n , on, on,off等方法,而是推荐使用mitt方案来代替
-
import mitt from 'mitt' const emitter = mitt() //监听一个事件 emitter.on('foo',e =>console.log('foo',e)) //触发事件 emitter.emit('foo',{a:'b'}) 由于3.x中不再支持prototype的方式给Vue绑定静态方法,可以通过`app.config.globalProperties.mitt = () =>{}方案`
-
-
-
setup()中使用props和this
-
在2.x中,组建的方法中可以通过this获取当前组件的实例,并执行data变量的修改,方法的调用、组建的通信等,但在3.x中,setup()在beforeCreate和created时机就已经调用,无法使用和2.x一样的this,但是可以通过接收
setup(props,ctx)
的方法,获取当前组件的实例和props-
export default{ props:{ name:String, }, setup(props,ctx){ console.log(props.name) ctx.emit('event') } } ctx和2.x中的this并不完全一样,而是选择性地暴露了一些property,主要有[attrs,emit,slots]
-
-
-
watch来监听对象改变
-
2.x中,可以采用watch来监听一个对象属性是否有改动
-
data(){ return{ name:'a' } }, watch:{ name(val){ console.log(val) } }
-
-
3.x中,在setup()中,可以使用watch来监听
-
import {watch} form 'vue' setup(){ let state = reactive({ name: }) }
-
-
vue3初探
性能提升
- proxy响应式
- 响应式原理由Object.defineProperty改为基于ES6的Proxy
- 优点:能够规避Object.defineProperty的问题
- 深度监听:性能更好,不会递归到底而是在get到这个层级才会去递归
- 可监听数组变化
- 可监听新增、删除属性
- 但无法兼容所有浏览器并无法polyfill
- patchFlag静态标记
- 编译模板时给动态节点做标记
- diff算法时值会对比标记的节点
- hoistStatic静态提升
- 将静态节点的定义,提升到父作用域,缓存起来
- 多个相邻的静态节点会被合并起来
- cacheHandle缓存事件
- 默认情况下@click也会进行动态标记
- 增加cacheHandle会对事件进行缓存且没有PatchFlag未开启cacheHandler
- SSR优化
- 静态节点直接输出绕过了vdom
- 动态节点动态渲染
- tree shaking
- 编译时根据不同的情况下引入不同的API,没用到的api会进行剔除。
Composition API:组合API
-
更好的代码组织和逻辑复用
-
setup:Composition API的入口点
-
响应式API:reacitve、ref、computed、readonly、watch、watchEffct等
-
新的生命周期函数:onMounted、onUpdated、onUnmounted等
-
-
自定义函数hooks函数
其他新增特性
- Teleport:瞬移组件的位置
- Suspense:异步加载组件
更好的TS支持
优势
- vue2存在复杂组件的代码变得难以维护并且对TS的支持有限
- vue3的性能更好、体积更小、更好的TS支持、更好的代码组织和逻辑抽离。