vue2和vue3两个版本的响应式原理以及开发模式和写法都有很大的改变,这里仅示例组件的新开发模式
vue2的开发模式是选项型(Options API)
会发现Options API
约束了各个模块的代码,可以很直观的看到在相应的位置做了什么事情
vue3的开发模式是组合型(Composition API)
现在换成Composition API
后,不再有模块的分离,所有的API都写在setup
里,这可以让代码可以灵活的使用
1、Setup
是Composition API的入口
2、this
在setup中不可用
3、所有的Composition API使用前都必须先载入import {} form "vue"
4、所有的数据需要渲染到视图的都要return
出去
创建组件实例,初始化props后,就可以调用Setuop
函数
从声明周期的视角来看,它是在beforeCreate
前调用
获取props
对象,不允许结构,否则响应式失效
此对象包含attrs
slots
emit
三个属性,可以进行结构
export default {
props: {
name: String
},
setup(props,context) {
console.log(props.name);
// Attribute (非响应式对象)
console.log(context.attrs)
// 插槽 (非响应式对象)
console.log(context.slots)
// 触发事件 (方法)
console.log(context.emit)
}
}
接收一个参数,返回一个响应式的对象
在非视图层获取值需要通过obj.value
得到
{{count.value}}
import {ref} from 'vue' //载入ref
export default {
setup() {
const count=ref(0)
}
return {
//需要渲染到视图的数据都必须return出去
count
}
}
当使用组合型API时,有时候需要获取模板内元素(Dom)或组件实例的引用
,可以声明一个ref
并返回它
www.lxtian.com
import {ref} from 'vue' //载入ref
export default {
setup() {
const url = ref(null);//
const btn=()=>{
console.log(url.value.innerText) //输出 www.lxtian.com
}
return {
url,
btn
}
}
}
接收一个参数(普通对象),返回该对象的响应式代理
{{state.count}}
import {reactive} from 'vue' //载入reactive
export default {
setup() {
const state = reactive({
count:0
})
return {
//需要渲染到视图的数据都必须return出去
state
}
}
}
toRefs()
可以将reactive
声明的响应式对象,转为普通的对象
{{name}}
mport { reactive, toRefs } from 'vue'
export default {
setup(){
const state = reactive({
name:'小明'
})
return {
...toRefs(state)
}
}
}
ref
:传入的是普通值,一般用于定义基本类型的数据reactive
:传入的是普通对象,一般用于定义复杂类型的数据
接收一个函数时:值为只读,无法修改或赋值
接收一个对象:get
set
属性,可以灵活操作获取时和修改时的状态
小明今年已经岁啦!
出生年份是:
import { reactive,computed } from 'vue';//引入reactive和computed
export default {
setup(){
const xm=reactive({
age:20
})
const year=computed({
//获取时触发
get(){
return 2021-xm.age
},
//赋值或修改时触发
set(val){
xm.age=2021-val
}
})
return {
//需要渲染到视图的数据都必须return出去
xm,
year
}
}
}
// 监听reactive对象
const state = reactive({ count: 0 })
watch(() => state.count, (newVal, oldVal) => {
console.log("新值:"+newVal)
console.log("旧值:"+oldVal)
}
)
// 监听ref对象
const count = ref(0)
watch(count, (newVal, oldVal) => {
console.log("新值:"+newVal)
console.log("旧值:"+oldVal)
})
const xm=reactive({
name:"小明",
age:20
})
watch([()=>xm.age,()=>xm.name],
([newAge,newName],[oldAge,oldName])=>{
console.log(newAge,newName);
console.log(oldAge,oldName);
})
=> 弃用beforeCreate
=> 弃用createdbeforeMount
=> onBeforeMount
---- 挂载前Mounted
=> onMounted
---- 挂载后beforeUpdate
=> onBeforeUpdate
---- 更新前updated
=> onUpdated
---- 更新后beforeDestroy
=> onBeforeUnmount
----销毁前destroyed
=> onUnmounted
---- 销毁后
测试过发现vue2的生命周期还是可以在vue3版本中使用的,但是要写在setup
之外
感谢阅读,知识尚浅,如有错误欢迎指出!
以上仅示例一些常用的模块,深入了解原理请移步Vue3文档:https://v3.cn.vuejs.org/guide/reactivity-fundamentals.html