Vue3 原理 : 基于ES6新增的proxy代理实现的
优点
- 相比 vue2 更快 更小,开发时搭配 vite 热编译瞬间完成。
- 组合式API 搭配 es6 的语法编写代码很舒适。
- 没有this,降低代码耦合性,提高了复用性
区别 、
一 、响应式原理不同
vue2响应式原理采用的object.defireProperties 监听对象
vue3采用的pxoy代理的方式监听对象
二 、 启动方式不同
// vue2
new({
store,router,render:h=>h(App)
}).$mount("#app")
// vue3
import {createApp} from 'Vue'
createApp(App).use(store).use(router).mount("#App")
三 、全局方法定义
// vue2
vue app - createApp(App)
// vue3
var app = cretadApp(App)
app.config.globalProperies.$http = axios
四 、 template 根组件
Vue2 有且只有一个根组件 、Vue3 没有固定的根节点
五 、 生命周期
Vue3 => Vue2
- beforeDestroy 改名为 beforeUnmount
- destroyed 改名为 unmounted
- beforeCreate => setup
- created => setup
- beforeMount => onBeforeMount
- mounted => onMounted
- beforeUpdate => onBeforeUpdate
- updated => onUpdated
- beforeUnmount => onBeforeUnmount
- unmounted => onUnmounted
setup() {
onMounted(()=>{
console.log("组件已经挂载完毕");
// myp.value就是dom节点
myp.value.addEventListener("click",()=>alert(myp.value.innerText))
})
}
六 、 setup 组件
setup() 函数在组件创建 created() 之前执行。
setup() 函数接收两个参数 props 和 context。
第一个参数 props,它是响应式的,当传入新的 prop 时,它将被更新。
第二个参数 context 是一个普通的 JavaScript 对象,它是一个上下文对象,暴露了其它可能在 setup 中有用的值。
注:在setup 不需要出现this
// 简易计数器
<template>
<div>
<p>计数器实例: {{ count }}</p>
<input @click="myFn" type="button" value="点我加 1">
</div>
</template>
<script>
import {ref, onMounted} from 'vue';
export default {
setup(){
//定义初始值为0的变量,要使用ref方法赋值,直接赋值的话变量改变不会更新 UI
let count = ref(0);
// 定义点击事件 myFn
function myFn(){
console.log(count);
count.value += 1;
}
// 组件被挂载时,我们用 onMounted 钩子记录一些消息
onMounted(() => console.log('component mounted!'));
// 外部使用组合API中定义的变量或方法,在模板中可用。
return {count,myFn} // 返回的函数与方法的行为相同
}
}
</script>
七 、 ref 创建响应式数据
使用ref可以创建一个包含响应式数据的引用对象(reference对象,简称ref对象),可以是基本类型、也可以是对象。
// 导入ref
import { ref } from "vue";
// 创建
const msg = ref(value)
// 响应式对象
const list = reactive(["vue","react","angular"])
// 使用
msg.value
// 在模板中
<div>{{msg}}</div>
<div v-for="item in list" :key="item">
{{ item }}
</div>