vue3邂逅--setup

vue3组合式API之setup方法

1、组合式API是为了解决大组件方法与数据分隔太远,太碎片化的问题。

2、setup是vue3.x中新的操作组件属性的方法,是组件内部暴露出的所有属性和方法的统一的API

3、setup函数,它将接收两个参数:setup(props, context)  props为响应式
4、setup 返回的所有内容都将暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。
5、从 setup 返回的 refs 在模板中访问时是被自动浅解包的,因此不应在模板中使用 .value
6、setup执行时,组件都未曾创建,即它的执行时间再beforeCreated之前
7、注意:(1)ref主要用于基本类型的响应。ref如果要修改值,需要使用.value
		(2)而reactive主要用于引用类型的响应
8、toRefs()方法的作用是把对象转成响应式的数据

        
简单演示:对ref,reactive,toRefs,computed,watchEffect,watch拓展运算符
<template>
  <h2 @click="changeNum">{{num}}</h2>
  <h2>{{user.name}}</h2> //使用...toRefs前,只能通过.value的方式
  <h2 @click="changeAge">{{age}}</h2>
  <h2>{{reverseName}}</h2>
</template>
<script>
import {ref,reactive,toRefs,computed} from 'vue'
export default {
  name: 'App',
  setup() {
    const num = ref(0);//基本类型(number)用ref
    const user = reactive({//对象用reactive
        name: 'wy',
        age: 18,
        //计算属性的使用方式
        reverseName: computed(() => {
            return user.name.split('').reverse().join('');
        })
    })
    function:changeAge() {
        user.age = 20
    }
    function: changeNum() {
        count.value++ 
    }
    watchEffect(() => {
        console.log(user.age); //监听user.age的改变
	  console.log('user.age发生变化时,触发watchEffect函数')//当user.age发生改变时,会触发执行此函数
    })
    //监听数据改变,并且获取数据改变前后的值,
    watch(num,(newVal,oldVal) => {  //可单独或监听多个数据对象变化watch([num,user.age](newVal,oldVal)
        console.log('新值':newVal);
        console.log('原值':oldVal);
        console.log('num发生了变化',)
    })
    return {count,changeNum,...toRefs(user),changeAge}
  }
}
</script>


watch和watchEffect的区别,见下帖wy。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值