首页 > 睿知 > it技术 > >
vue3.0|【vue3.0】vue2.0到vue3.0的变化（区别）（上）
2022-06-08
结构部分
vue2.0import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'new Vue({
store,
router,
render:h=>h(App),
}).mount('#app')
vue3.0import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
createApp(App).use(store)
.use(router)
.mount('#app')
组件语法部分
vue3.0使用组合式api,统一放在setup回到函数中；
由于setup这个回调函数在组件创建之前执行，所以没有this，这就意味着，除了props之外，无法访问组件中声明的任何属性（data、computed、methods等）
数据的响应式
ref 对基本结构的数据的值 创建了一个响应式引用（用来定义string、number等）// vue2
data(){
return {
msg:'哈哈'
}
}
//vue3
setup(){
let msg = ref('哈哈')
}
//使用：
//1.在模板中使用：{{msg}}
reactivelet person = reactive({name:'lisi',age:6})
toRefslet {name,age} = toRefs(person)
readonlylet orig = reactive({mount:0})
let copy = readonly(orig)
orig.count++
copy.count++ // 警告: "Set operation on key 'count' failed: target is readonly.
组合式apisetup(){
// 1. data数据
let msg = ref('哈哈')
let person = reactive({name:'lisi',age:6})//2. methods方法
const changeMsg = ()=>{
msg.value = 'https://www.it610.com/article/改变哈哈'
}
const changePerson = ()=>{
person.age = 20
}//3. watch监听器
watch(msg,(newValue,oldValue)=>{
console.log(newValue,oldValue)
},{deep:false,immediate:false})watch(person.age,(newValue,oldValue)=>{
console.log(newValue,oldValue)
})
//4. 计算属性
const filterMsg = computed((num)=>{
return msg.value+num
})
return {
msg,
person,
changeMsg,
changePerson
}
}
propsimport {toRefs} from 'vue'
setup(props){
const {title} = toRefs(props)//props是响应式的，直接使用es6解构会消除props的响应式，所以通过toRefs方法完成解构赋值
console.log(title)
}
context上下文export default {
//传递给setup函数的第二个参数是context,它暴露了组件的三个属性
setup(props,{attrs,slots,emit}){}
}
生命周期beforeDestroy --> beforeUnmount
destroyed --> unmounted
自定义指令的api变化//vue2.0
Vue.directive('focus',{
inserted:function(el){
el.focus
}
})
//vue3.0
const app = creatApp({})
app.directive('focus',{
mounted(el){
el.focus()
}
})
【vue3.0|【vue3.0】vue2.0到vue3.0的变化（区别）（上）】 未完。。。。。。
推荐阅读
