vue3学习笔记二：readonly、watchEffect、watch

readonly

传入一个对象(响应式或普通)或ref,返回一个原始对象的只读代理。会递归里面的所有属性都是只读的。

let {readonly, createApp} = Vue;
createApp({
  setup(){
    const test = readonly({name:222, arr:[{test:333}]})
    //尝试添加点击事件看能不能改变
    function clickName(){
      test.name = 100
    }
    return {test, clickName}
  }
}).mount('#app')

目标是只读

watchEffect

这个函数接收的参数也是函数，在初始化的时候会执行传入的这个函数，并在其依赖更变时重新运行该函数

//html部分写了两个v-model
//<input type="text" v-model="title">
//<input type="text" v-model="subtitle">
setup(){
    let title = ref('标题');
    let subtitle = ref('二级标题')

    const stop = watchEffect(()=>{
      console.log(title.value,subtitle.value)
    })

    // 停止监听
    setTimeout(()=>{
      stop()
    },3000)
    return { title, subtitle }
 }

清除副作用

在下面的示例代码中，如果没有在清除副作用方法中添加清除定时器，那么每点击按钮一次，就会触发watchEffect里面的方法一次，如果三秒内点击了两次就会执行getList方法两次造成了重复，在清除副作用方法中添加清除定时器就可以实现3秒内多次点击，先清除定时器，解决了不必要的重复执行。

<div id="app">
    <p>{{title}}</p>
    <button @click="clickBtn">click</button>
  </div>
  <script src="https://unpkg.com/[email protected]"></script>
  <script>
    let {createApp, ref, reactive, watchEffect} = Vue;
    createApp({
      setup(){
        let title = ref(1);
        let list = reactive([])

        watchEffect((onInvalidate)=>{
          let timer = getList(title.value)
          // 清除副作用
          onInvalidate(()=>{
            clearTimeout(timer)
          })
        })

        function getList(val){
          let t = setTimeout(()=>{
            this.list = [1,2,3]
            console.log(this.list)
          },3000)
          return t
        }

        function clickBtn(){
          title.value++
        }
        
        return { title, clickBtn }
      }
    }).mount('#app')
  </script>

watch

用于监听特定的数据源，并在回调函数中执行副作用。默认情况下数据源变化时才执行回调（实例初始化时不会执行）。

• 监听一个ref：第一个参数是ref，第二个参数是一个回调函数

setup(){
  let title = ref(1);

  watch(title,val=>{
    console.log('发生变化',val)
  })

  function clickBtn(){
    title.value++
  }
  
  return { title, clickBtn }
}

• 监听 一个reactive中的数据：第一个参数拥有返回值的getter函数，第二个参数是一个回调函数

setup(){
   let form = reactive({name:'小明'});

   watch(()=> form.name,val=>{
     console.log('==',val)
   })

   function clickBtn(){
     form.name = '小红'
   }
   
   return { form, clickBtn }
 }

• 监听多个数据源

setup(){
   let form = reactive({name:'小明'});
   let title = ref('111');

   watch(()=> [form.name,title],([name,title])=>{
     console.log('==',name,title.value)
   })

   function clickBtn(){
     form.name = '小红'
     title.value = '新的标题'
   }
   
   return { form, clickBtn }
 }