vue3 笔记(二)

189 阅读1分钟

watch

  • 与vue2.x的watch功能一样,只是写法上存在差异
  • watch(source,callback,option)
    • source:要监听的数据
    • callback:监听数据之后的回调函数
    • watch相关的配置项
  • 使用方法
   import { watch,ref,reactive } from "vue"
   ......
   setup(){
       const number = ref('1');
       const n = reactive({num:10,age:'24'})
       // 监听ref
       watch(
        number,
        (newVAl,oldVal)=>{
           ......
        },
        {
            immediate:true,
        }
       )
       
       // 监听reactive
      watch(
        ()=>n.num,
        (newVal,oldVal)=>{
            ......
        }
      )
      
      // 监听多值
      watch(
        [()=>n.num,()=>n.age],
        ([numNewVal,numOldValue],[ageNewVal,ageOldVal])=>{
            ......
            // callback
        }
      )
   }

computed

  • 与vue2.x的conputed功能一样,只是写法上存在差异
  • 使用方法
    import { ref,computed } from "vue"
    ......
    setup(){
       const firstName = ref('L');
       const lastName = ref('E');
       // 不含set的写法
       const fullName = computed(()=>firstName.value + lastName.value);
       //set的写法
       let fullName = computed({
            get(){
                return firstName.value + lastName.value;
            },
            set(val){
                firstName.value = val;
            }
       })
       // 调用fullName的set 方法
       const changeFullName = () => {
            fullname.value = 'XXX'
       }
       return {
            fullName
       }
    }

获取页面元素的实例

  • 使用方法
   <div ref="myDiv"></div>
   
   <script>
       import { ref,onMounted } from "vue";
       ......
       setup(){
            const myDiv = ref(null); // 名字需要与页面的ref相同
            onMounted(()=>{
                // 需要在mounted获取
                console.log(myDiv.value)
            })
            return {
                myDiv // 必须要return出去
            }
       }
   </script>

nextTick

  • 与vue2.x的nextTick功能一样,只是写法上存在差异

  • 使用方法

    import { nextTick } from "vue"
    ......
    setup(){
        nextTick(()=>{
            console.log('nextTick')
        })
    }

methods

  • 使用方法
    <div @click="handleClick('div')"></div>
    
    ......
    setup(){
        const handleClick = val =>{
            console.log(val) // 'div'
        }
      return{
        handleClick
      }
    }