目录
vue3.0可以有多个根节点
1.setup
函数的用法，可以代替vue2中的data和methos属性，compued属性，都是直接写在setup中就可以了
1.//在script上加setup属性，组件编译过程中的代码运行是在setup函数中，所有es模块导出都认为暴露给上下文的值，并且包含在setup()返回对象中 // 定义setup // setup是组件使用Composition API的入口函数 // 接收两个参数：props(接受组件props的属性),context(上下文对象，包含一些属性attrs,slots,emit) // ,这些属性在vue2中需要通过this才能访问 setup(props,context) { console.log('1'); // 在vue3的setup中不能访问vue2的this对象，只能在setup中通过context访问this中常用的几个属性 // console.log(this.$emit()); }
2.ref
定义一个响应式的数据对象，如果要template中使用数据对象，必须return出去
- ref:可以定义：字符串，数组，数组对象，对象 -如果访问ref中的属性数据，必须通过属性名，value
1. // composition API // data,methods,computed,watch都是写在setup中 setup(){//在setup里定义数据一定要返回出去return // 直接真么定义不是响应式的数据 // const count = 0 // 创建响应式数据对象count ，初始值为0 const count = ref(0) const list = ref(['特仑苏','追梦']) // 定义数组对象 const user = ref([ {id:101,name:'特仑苏'}, {id:102,name:'追梦'}, ]) // 在这里面写函数不需要写逗号 let updUser=()=>{ // 修改数据 user.value[0].name="Terrance" } let getCount = ()=>{ // 如果要访问ref()创建出来响应式数据对象的值，必须通过value属性才可以 console.log(count.value); } }
3.reactive
也是用来定义响应式数据对象，类似vue2x中的data()返回的响应式对象
ref 与 reactive 这两种方法定义的都是响应式对象
ref：比较推荐定义基本数据类型
reactive: 推荐定义复杂数据类型时使用
4.torefs:
解构响应式对象的数据
把一个响应式对象转换成普通对象，普通对象的属性都一个ref,和响应式的属性一一对应
5.computed
计算属性 和vue2中的计算属性用法一样，computed写在setup函数中
setup(){//在setup里定义数据一定要返回出去return // reactive也是创建响应式对象的 // reactive创建的响应式数据对象，类似vue2x中的data()返回的响应式对象 const data= reactive({ test:'测试', user:{ name:'木道人', sex:'男' }, list:['a','b','c'] }) // 访问reactive时可以直接访问不用别的参数 console.log(data.test); // 创建一个响应式对象user const user = reactive({ firsName:'', lastName:'' }) // 根据user的值，创建一个响应式的计算属性fullName // 他会根据依赖自动计算返回一个新的响应式数据(ref) const fullName = computed(()=>{ return user.firsName + '' +user.lastName }) const getFullName=()=>{ console.log(fullName.value); } return{ // 结构响应式数据对象 // 用...扩展运算符解构响应式对象数据是不可行的， // 因为解构后就变成了普通变量，就没有了响应式的能力 // ...data // toRefs把一个响应式的对象转换成普通对象，对data进行了包装， // 再使用...拓展符的方式，成为响应式的解构 ...toRefs(data), ...toRefs(user), // 计算属性 fullName, getFullName } }
博主公_号：前端老实人，期待各位小伙伴加入我们一起学习的队伍哦❤
