vue3.0初试
组件注册和组件通信
父组件
<template>
<shop_item :msg="msg" @change="childrenChange"></shop_item>
</template>
<script lang="ts" setup>
import shop_item from '../components/shop_item.vue'
components:{
shop_item
}
let msg = ref('子组件传过去');
let childrenChange = (val:any)=>{
console.log("val",val)
msg.value = val;
}
</script>
子组件
<template>
<p>子组件</p>
{
{msg}}
<div @click="change" style="border:2px solid red">修改父组件的值</div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
props:{
msg:{
type:String,
require:false,
default:'hahhaha'
}
},
setup(props,ctx) {
console.log("props",props)
console.log("ctx",ctx)
function change(){
ctx.emit("change",'子组件通知父组件修改的值')
}
return {
change
}
}
}
)
</script>
<style>
</style>
ref和 reactive
<script>
import {
ref, reactive } from "vue";
setup(){
const str = ref("vue3.0")
const obj = reactive ({
name: '张三', age: 20})
function changeStr(){
str.value = "vue3.0牛逼"
}
function changeObj(){
obj.name= "李四"
}
return {
str, obj, changeStr, changeObj }
}
</script>
watch和 watchEffect
参数说明:
watch(source, callback, [options])
source: 可以支持 string,Object,Function,Array; 用于指定要侦听的响应式变量
callback: 执行的回调函数
options:支持 deep、immediate 和 flush 选项。
const year = ref(0)
const user = reactive({
name:'gejianfang',
age:18
})
setInterval(()=>{
year.value ++;
user.age ++
},1000)
//监听ref定义的数据
watch(()=>user.age,(cur,pre)=>{
console.log(cur,'新值',pre,'旧值')
});
//监听reactive定义的数据
watch(year,(newValue,oldValue)=>{
console.log(newValue,'新值',oldValue,'旧值')
},{
deep:true})
/**上面我们分别使用了两个 watch, 当我们需要侦听多个数据, 可以进行合并**/
watch([()=>user.age,year],([cur,pre],[newValue,oldValue])=>{
console.log(cur,'新值',pre,'旧值');
console.log(newValue,'新值',oldValue,'旧值')
})
watchEffect(() => {
console.log(obj.name) // name为 xx
console.log(obj.count) // count为 2
})
watch和 watchEffect的区别
watch
1 显式指定依赖源,依赖源更新时执行回调函数
2 第一次页面展示的时候不会执行,只有数据变化的时候才会执行
3 参数可以拿到当前值和原始值
4 可以侦听多个数据的变化,用一个侦听起承载
watchEffect
1 自动收集依赖源,依赖源更新时重新执行自身
2 立即执行,没有惰性,页面的首次加载就会执行
3 无法获取到原值,只能得到变化后的值
4 每次初始化时会执行一次回调函数来自动获取依赖
computed
const allcheck = computed({
set:(v)=>{
data.shopList.forEach((item)=>{
item.checked = v;
item.shop.forEach((item2)=>{
item2.checked = v;
})
})
},
get:()=>{
return data.shopList.every((item)=>{
return item.checked == true
})
}
})