前言
没啥好说的,淦就完事了,按照自己的认知简单的整理了一下vue3新特性的笔记……
一、生命周期
import {onMounted} from 'vue'
export default {
components:{
NewComp
},
beforeCreate(){
console.log('beforeCreate')
},
created(){
console.log('created')
},
setup() {
console.log('setup',this)//this输出为undefined,vue3取消了this关键字
onMounted(()=>{
console.log('mounted completed!')
})
}
}
查看控制台输出顺序:
setup undefined
beforeCreate
created
mounted completed!
结论:
全部使用 按需导入
,且只能在setup()
中使用
比beforeCreate
,created
先调用,这两个生命周期直接用setup()替代
其他周期都保留了,只是在命名
方面稍有改变而已
二、setup()
- setup中没有this
- 在beforeCreate之前被调用
- setup函数是一个新的组件选项
- Vue2的data,生命周期,自定义函数都写在里面
1.ref和reactive区别
代码如下(示例):
<template>
<div>
个人信息:{{ofData.name}} -- {{ofData.sex}} -- {{ofData.address}} -- {{age}}
<button @click="UpdataData">点击修改姓名</button>
<div>
<button @click="decrease">-</button>
{{count}}
<button @click="add">+</button>
</div>
</div>
</template>
<script>
//记得从vue中导出引入
import {ref,reactive,computed} from 'vue'
export default {
setup(){
// 创建不需要改变的值
const text = '这是不需要响应改变的固定值';
// ref 是 vue 3.0 的一个重大变化,其作用为创建响应式的值
const count = ref(0);
//定义响应式对象数据,赋值
const ofData = reactive({
name: '弟弟',
sex: 'boy',
address: '中国'
});
console.log(ofData);
//声明函数,改变ofData数据
const UpdataData = () =>{
ofData.name = '弟弟行为' //reactive 直接对象.属性获取或改变值
}
//computed使用
const age = computed(()=> count.value * 2)
//递减
function decrease(){
count.value--;//ref 改变或获取值,必须使用.value
}
//递增
function add(){
count.value++;
}
//导出数据供模板使用
return{
text,count,ofData,UpdataData,decrease,add,age
}
}
}
</script>
接下来我们看一下输出的效果:
然后我们分别打印看一下ref和reactive
Vue3使用了Proxy代理,区别于Vue2的Object.defineProperty,使用ES2015的Proxy代替
模板中直接count渲染,修改则需要count.value
结论:
ref和reactive都是用来做数据绑定
的
ref响应式是普通数据
绑定
reactive响应式对象数据,则是用来处理对象
或者数组
的(之前vue2用的是$set)
2.computed
代码如下(示例):
<template>
<div>
{{count}}
{{computedCount['count10']}}
{{computedCount['count100']}}
<button @click="add">点击修改count</button>
</div>
</template>
//从vue中引入computed
import {ref,computed} from 'vue'
export default {
setup(){
//定义响应式数据
const count = ref(0);
//计算属性同函数用法差不多
const changeCount = computed(()=> count.value * 2)
//count递增
const add = () =>{
count.value++;
}
//计算多个数据,使用对象方式
const computedCount = computed(()=>{
return{
'count10':count.value * 10,
'count100':count.value * 100
}
})
//导出数据供模板使用
return{count,changeCount,computedCount,add}
}
}
接下来我们看一下输出的效果:
结论:
同生命周期一样需要从vue中 按需引入
可以返回一个值,也可以返回一个 对象
包含 多个值
3.watch
//监听一个ref
watch(count,(count,prevcount)=>{
console.log(count,prevcount)
})
//监听reactive中属性
watch(()=>ofData.name,(name,prevName)=>{
console.log(name,prevName)
})
//使用数组监听多个值
watch([count,age],([count,age],[prevCount,prevAge])=>{
console.log(count,prevCount,age,prevAge)
})
4.watchEffect
立即执行传入的一个函数,并响应式追踪其依赖,并在其依赖变更时重新运行该函数。(setup后,onMounted之前)
const count = ref(0)
watchEffect(() => console.log(count.value))
// -> 打印出 0
setTimeout(() => {
count.value++
// -> 打印出 1
}, 100)
总结
以上就是今天要讲的内容,后续出一篇关于组件之间的用法嗷……