vue3学习笔记—setup中几种函数的应用

watch（监听）

watch(message, (newValue, oldValue) => {
  console.log("新的值:", newValue);
  console.log("旧的值:", oldValue);
});

 改变了响应式变量messgae的值，当它发生改变时，就会触发watch监听函数中的回调函数，并且默认接收两个参数（新值和旧值）

watchEffect

只接受一个回调函数，会自动监听数据，当回调函数里的响应式数据发生改变，它会随即立即执行

watchEffect(()=>{
  console.log("新的值:", number.count);
})

computed（计算属性）

默认使用getter属性，读取数据，返回一个带有value属性的对象，打印得加.value

    const msg = ref('helloworld');
    const reverseMsg = computed(()=>{//返回一个带有value属性的对象
      return msg.value.split('').reverse().join('');
    });
    console.log(reverseMsg.value);

    computed:{
        reverseMsg:function(){
          return this.message.split('').reverse().join('')
    }
  }

生命周期钩子函数在setup中有一个参数，能多次使用

props

结构props是响应式的，可以在setup函数中用toRefs函数来完成

import { toRefs } from 'vue';
setup(props) {
    const { message } =toRefs(props);
    console.log(message.value);
  },

context

attrs :接收在父组件传递过来的，并且没有在props中声明的参数参数。

emit：子组件对父组件发送事件

    const counter=ref(20)
    function sendeParent(){
       context.emit('injectCounter',counter.value);
    } 
    context.expose({
      sendeParent,counter
    })
    return {sendeParent}
    <button @click="sendeParent">发送数据</button>

provide-inject

父组件只要声明了provide，在其子组件，孙组件，曾孙组件等能形成上下游关系的组件中交互，无论多深都能通过inject来访问provider中的数据

import {provide, ref} from 'vue';
setup(){
    const name = ref('张三')//ref使值变成响应式
    provide('name',name)
    function changeName(){
      name.value='李四'
    }
    return {changeName}
  },
import { inject } from 'vue';
setup() {
    const name = inject('name');
    return {name}
  },
<button @click="changeName">改变name</button>