Vue2.0与Vue3.0区别总结
结构部分
1. 程序主⼊⼝⽂件 main.js
2. vue2.0
import Vue from 'vue'
import App from './App.vue'
import router from "./router"
import store from "./store"
new Vue({
store,
router,
render: h => h(App),
}).$mount('#app')
vue3.0-暴露出 createApp⽅法
import { createApp } from 'vue';
import App from './App.vue'
createApp(App).mount('#app')
组件语法部分(vue3.0主要针对api的优化,vue3.0兼容vue2.0写法)
vue3.0 使⽤组合式api，使⽤的地⽅在setup回调函数中，这个回调函数是创建组件之前执⾏，由于在执⾏ setup 时尚未创建组件实例，因此在 setup 选项中没有 this。这意味着，除了 props 之外，你将⽆法访问组件中声明的任何属性——本地状态、计算属性或⽅法。
1. 数据响应式
ref:ref 对我们的值创建了⼀个响应式引⽤。使⽤引⽤的概念将在整个组合式 API 中经常使⽤。
在模板中解析会⾃动解开，直接使⽤。(<p>{{msg}}<p>)；但是在js中必须（msg.value）
reactive: 响应式转换是“深层”的——它影响所有嵌套 property。在基于 ES2015 Proxy 的实现中，返回的代理是不等于原始
对象。建议只使⽤响应式代理，避免依赖原始对象
对对象进⾏结构赋值会让对对象每⼀个属性失去响应式，所有在es6解构赋值前，可以通过toRefs⽅法包装
toRefs: 将对象每个属性有具有响应式属性，并且带有ref特性；访问⽅式不同。可以解构赋值不影响数据的响应式
readonly：有时我们想跟踪响应式对象 (ref 或 reactive) 的变化，但我们也希望防⽌在应⽤程序的某个位置更改它。例如，
当我们有⼀个被 provide 的响应式对象时，我们不想让它在注⼊的时候被改变。为此，我们可以基于原始对象创建⼀个只
读的 Proxy 对象
ref/reactive/toRefs 数据区别：
import { reactive, readonly } from 'vue'
const original = reactive({ count: 0 })
const copy = readonly(original)
// 在copy上转换original 会触发侦听器依赖
// 转换copy 将导失败并导致警告
vue2.0 选项式api
data() {
return {
msg: "初始化"
}
},
methods: {
changeHandle() {
this.msg = "改变的"
}
},
vue3.0 组合式api
setup() {
let msg = ref("初始化");//string number
let person = reactive({name:"lisi",age:20})// object array
const changeHandle = () => { msg.value = "改变的" }
const changeHandle2 = () => { person.age = 30 }
return {
msg,
changeHandle,
changeHandle2
}
},
watch使⽤
vue2.0 选项式api
watch: {
//普通的
msg:{
handler(newValue,oldValue) {
console.log("....")
}
},
//深度
person:{
handler(newValue,oldValue) {
},
immediate:true,
deep:true
}
},
*vue3.0 组合式api
setup() {
let msg = ref("初始化");//string number
let person = reactive({name:"lisi",age:20})// object array
watch(msg,(newValue,oldValue)=>{
console.log(this);//undefined；箭头函数绑定⽗级作⽤域的上下⽂，所以this不会指向当前的组件 console.log(newValue,oldValue);
},{deep:false,immediate:false})
watch(() => person.age,(newValue,oldValue) => {
console.log(newValue,oldValue)
})
return {
msg
}
},
computed使⽤
vue2.0 可以参考之前⽂章
computed:{
//⽆参数
reactive和proactive的区别filterMsg() {
return this.msg + "999"
},
//有参数
filterMsg2(number) {
return function() {
return this.msg + number;
}
},
// ⾃定义set⽅法
filterMsg3: {
get() {
return this.msg + "999"
},
set(value) {
...
}
}
}
vue3.0
//⽆参数
const filterMsg =computed( () => msg.value + "fdfasdf")
/
/有参数
const filterMsg2 =computed(() => {
return function(num) {
return msg.value + num
}
})
// ⾃定义set⽅法和get⽅法
const count = ref(1)
const plusOne = computed({
get: () => count.value + 1,
set: val => {
count.value = val - 1
}
})
plusOne.value = 1
console.log(count.value) // 0
组件间的通信
在了解组件通信之前，我们先要深⼊了解setup，render⽅法,this,。
setup
1. props
表⽰组件传⼊当前组件的props值，响应式的，当传⼊新的prop时，它将被更新，可以通过watch监听到变化。
注意：
但是，因为 props 是响应式的，你不能使⽤ ES6 解构，因为它会消除 prop 的响应性。
我们可以通过 toRefs⽅法完成可以解构赋值，且不影响属性的响应式
import { toRefs } from 'vue'
setup(props) {
const { title } = toRefs(props)
console.log(title.value)
}
context 上下⽂
传递给 setup 函数的第⼆个参数是 context。context 是⼀个普通的 JavaScript 对象，它暴露三个组件的property：
// MyBook.vue
export default {
setup(props, { attrs, slots, emit }) {
...
}
}
渲染函数 h
setup() {
const num = ref(100);//添加包装引⽤对象
const person = reactive({name:"lisi",age:20});//本⾝就是响应式对象
const person2 = toRefs(person);//对对象每⼀个属性添加包装引⽤
console.log(person2)
return () => h("div", [num.value,person.name,person2.age.value])
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论