vue3 组合api写法
vue3写法
变量声明改变,不用在创建data函数,使用reactive声明,比如:
{{state.name}}//这里直接使用emit接收方式一样,触发不一样例如
没有this,通过useContext()获取上下文
import {useContext} from 'vue' const ctx=useContext()//这里ctx就相当于vue2 的this
定义输出 父组件通过ref访问
上下文中,有个方法叫
expose({})
接收一个对象//子组件
//父组件
dj //注册ref ref定义变量
ref(10)==>本质 reactive(value:10)
用ref函数创建的数组不能用watch去监听
主要用来声明普通变量import {ref} from 'vue' setup(){ let cou=ref(0)//定义了一个初始值为0 的变量cou } return {cou} //在组合api中 想要使用变量 必须要把变量/方法暴漏出去 //通过 cou.value 改变值 原因:本质是reactive({value:0})
reactive定义对象数组
import {reactive} from 'vue' setup(){ let cou=reactive({name:'malunan'})//定义了一个初始值为0 的变量cou } return {cou} //在组合api中 想要使用变量 必须要把变量/方法暴漏出去
判断是否是ref或者是reactive类型
ref和 reactive 底层是通过 _v_ref来判断的
isRef
和isReactive
通过 import {isRef,isReactive} vue 引入
isRef(变量) isRef(isReactive)
非递归监听变量创建 shallowRef 和 shallowReactive 创建 (场景:数据量比较大的时候使用)
如果是shallowRef创建的数据。那么vue 监听的是.value的变化,并不是第一层的变化
triggerRef(变量)
shallowRef数值变化 主动更新页面
vue没有提供trigerReactive方法twRaw 获取到原始数据
import {reactive,toRaw} from 'vue' setup(){ let obj={name:'lnj',age:'18'} let state=reactive(obj)//其实这里是被包装后的,虽然指向同一个地址,但vue监听的不一样 let obj2=toRaw(state) obj===obj2//true obj===state//false //直接改变obj内的变量 不会触发视图更新 //ref创建获取原始数据 let state=ref(obj) let obj2 =toRaw(state.value) }
如果利用ref将某一个对象中的属性变化成响应式数据。
我们修改的响应式数据,是不会影响到原始数据的let obj={name:'js'} let state=ref(obj.name) state.value='zs' //改后 obj的数据不会发生变化
可以使用toRef变成响应式
toRef
let obj={name:'js'} let state=toRef(obj,'name') //这样声明,obj的数据是会发生变化,但视图不会变化 state.value='zs'
ref->复制
toRef->引用toRefs
多个声明 相当于toRef简写
let obj={name:'js'} let state=toRefs(obj) //这样声明,obj的数据是会发生变化,但视图不会变化 state.value='zs'
makRow 禁止追踪
使用makRow()的数据,修改后的数据不会被追踪,修改视图后不会更新
customRef 创建自定义ref
接收两个参数 track用来追踪 trigger用来触发响应,更新界面
customRef((track,trigger)=>{ return { get(){ track();//用来追踪 }, set(newValue){ // trigger();//trigger用来触发响应,更新界面 } } })
readonly创建只读数据 shallowReadonly创建一层只读数据
let state=readonly({name:'ma'}) //创建一个只读数据
let state=readonly({name:'ma',age:{num:18}}) //创建一个只读数据,name是只读,num不受影响
isReadonly 判断是否是只读数据
isReadonly(state)//返回true或false
Vue.prototype 替换为 config.globalProperties
在 Vue 2 中, Vue.prototype 通常用于添加所有组件都能访问的 property。
在 Vue 3 等同于config.globalProperties。这些 property 将被复制到应用中作为实例化组件的一部分。
// 之前 - Vue 2 Vue.prototype.$http = () => {} // 之后 - Vue 3 const app = createApp({}) app.config.globalProperties.$http = () => {}
nextTick 在vue3中使用
import { nextTick } from 'vue' nextTick(() => { // 一些和DOM有关的东西 })
注册组件
// 3.x import { h, resolveComponent } from 'vue' export default { setup() { const ButtonCounter = resolveComponent('button-counter') return () => h(ButtonCounter) } }
支持绑定多个v-model
例如:
这也可以作为 .sync 修饰符的替代
.sync作用 子组件更新父组件值this.$emit('update:title', pageTitle)
不用在父组件声明事件vuex使用
import {useStore} from 'vuex' const store=useStore() //在使用的地方直接使用 相当于 vue2的this.store store.state.collapse; store.commit("hadndleCollapse", !collapse);
computed 计算属性使用
import {computed} from 'vue' setup(){ let username=computed(()=>{ let myname = localStorage.getItem("ms_username"); return myname ? myname : name.value; }) }
相当于vue2
computed:{ username(){ let myname = localStorage.getItem("ms_username"); return myname ? myname : name.value; } }
router 使用
import {useRouter} from 'vue-router' let router=useRouter() //router 就相当于this.router
watch监听
import {watch} from 'vue' watch( ()=>state.count,//要监听的值 (new,old)=>{ console.log(new) console.log(old) } )
多个监听
watch( ()=>[state.count,state.title],//要监听的值 ([newcount,oldcount],[newtitle,oldtitle])=>{ } )
onBeforeRouteUpdate 监听路由 watch监听路由已被废弃
onBeforeRouteUpdate((to,from)=>{ console.log(to,from) })
推荐阅读更多精彩内容
全面解析Vue3 Reactive家族和Ref家族API前言 你是不是习惯了Vue2的赋值即响应式?Vue2还有个Vue.observable但你从没用过?结果Vue3像...microkof阅读 4,941评论 3赞 14 Vue3 学习笔记 —— (一)深入理解组合式 API目录(Vue3 学习笔记梳理)Author:GoritDate:2021/4/24Refer:网易云课...目录
CodingGorit阅读 250评论 0赞 1 Vue3丨进一步了解这 20 个响应式 API,写码如有神前面说的话 在 Vue2 中,个人觉得对于数据的操作比较 “黑盒” 。而 Vue3 把响应式系统更显式地暴露出来,...前端精阅读 598评论 0赞 4 vue3常用api盘点及现有vue2组件迁移示例前言: vue3项目是在两年前开始的,正式版3.0于2020年9月发布;目前vue生态支持情况还不完善,如vuex...我友几个逗逼阅读 509评论 0赞 0 Vue3 Composition API2020 年 9 月,它终于来了,尽管很早就上了 Beta 版本,但是尤大确一直没有推出正式版,如今正式版上线,让...橙色流年阅读 617评论 1赞 4 2019-11-28 周四 阴今天感恩节哎,感谢一直在我身边的亲朋好友。感恩相遇!感恩不离不弃。 中午开了第一次的党会,身份的转变要...迷月闪星情阅读 7,852评论 1赞 9 凯恩想在热刺和穆里尼奥建立“牢固的关系”哈里·基恩想和新教练何塞·穆里尼奥建立一种“牢固的关系”,这将有助于托特纳姆更上一层楼。 凯恩在4-2战胜奥林匹亚...疯狂SPORTS阅读 7,175评论 0赞 6 2019.11.28下午市电视台彩排完,天已黑刘凯书法阅读 2,623评论 1赞 3 表情管理表情是什么,我认为表情就是表现出来的情绪。表情可以传达很多信息。高兴了当然就笑了,难过就哭了。两者是相互影响密不可...Persistenc_6aea阅读 3,087评论 1赞 6 Substrate的transaction-payment模块分析Substrate的transaction-payment模块分析 transaction-payment模块提供...建怀阅读 3,750评论 0赞 4相关推荐