Principio de respuesta
El principio de respuesta de vue2 utiliza Object.defineProperties para escuchar el getter y setter del objeto
Vue3 pxoy proxy para escuchar el objeto
método de inicio
ver2
new Vue({
store,
router,
render:h=>h(App)
}).$mount("#app")
ver 3
import {
createApp} from 'vue'
createApp(App).use(store).use(router).mount('#app')
método de definición global
ver2
Vue.prototype.$http = axios
ver 3
var spp = cerateApp(App)
app.config.globalProperies.$http = axios
componente raíz de la plantilla
Vue2 tiene y solo un componente raíz
vue3 puede tener múltiples
ciclo vital
beforeCreate antes y después de la creación de vue2 , beforeMount antes y después del montaje creado, beforeUpdate antes y después de la actualización
montada , beforeDestroy antes y después de la destrucción actualizada, destruido
beforeCreate antes y después de la creación de vue3
,
beforeMount antes y después del montaje creado,
beforeUpdate antes y después de la actualización montada,
interruptor de desmontaje actualizado beforeUnmount, desmontado
Ventajas de vue3 en comparación con vue2
Ventaja 1 Importe bajo demanda, importe las funciones que se necesitan
Ventaja 2 El método de escritura es más cercano al js nativo y la lectura es más clara
Ventaja 3 Sin esto, se reduce el acoplamiento de código y se mejora la reutilización
<template>
<div>
<button @click="num++">{
{
num}}</button>
<button @click="setNum()">改变为5</button>
<div v-for="item in list" :key="item">{
{
item}}
<button @click="list.splice(index,1)">x</button>
</div>
<p>{
{
twiceNum}}</p>
<p ref="myp">我爱我的祖国</p>
</div>
</template>
<script>
import {
ref,reactive,watch,watchEffect,computed,onMounted} from 'vue';
// 优点1 按需导入,需要什么功能导入什么
// 优点2 写法更加接近原生js，阅读更清晰
// 优点3 没有this,降低代码耦合性，提高了复用性
export default {
setup(){
// 定义一个值类型的响应式对象num 默认值是5
const num=ref(5)
// 定义一个应用类型的响应式数据list 默认是
const list = reactive(["vue","react","angular"])
// 返回num
// 定义一个修改num的方法
function setNum(){
// 在steper内部修改num值要修改num.value的值
num.value=5;
}
watch(num,function(nval,oval){
console.log("num由",oval,"变化为",nval)
})
watchEffect(()=>{
// 只要在改回调函数中引用的变量，都会监听到变化
console.log(num.value,list[1],'变化了');
})
var twiceNum=computed(()=>num.value*2)
// 在setup没有创建前后，有挂载，更新，卸载前后
var myp=ref(null);
// setup中的生命周期前面加on
onMounted(() => {
console.log("组件已经挂载完毕");
// myp.value就是dom节点
myp.value.addEventListener("click",()=>alert
(myp.value.innerText))
})
return {
num,list,setNum,twiceNum,myp}
}
}
</script>
<style>
</style>