vue3.0常用语法

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
        })
    }
})