vue双向数据绑定的原理发生改变
vue2双向绑定原理:通过Object.defineProperty()对数据劫持结合发布者-订阅者模式实现 , 通过对data的set get方法调用实现
vue3双向绑定原理:使用proxy对数据的代理。
vue2只能监听某个属性 不能监听对象
vue3不需要遍历 提升了效率
vue2只能有一个根节点 ,vue3可有多个根节点
vue2是选择性api , vue3是组合式api
vue3 使用setup语法糖 把所有的数据方法放在里面
vue3生命周期没有beforecreate , created ,
setup中不能使用this
vite创建vue3项目
npm init vite@latest my-vue-app -- --template vue
使用插件可以不用每次都引入vue,vue-router相关的属性 如ref , reactive , ...
npm i unplugin-auto-import
并且配置vite.config.js
toRefs是用于解构的
computed的使用
let newmsg = computed(()=>{
return msg.value + 'hello'
})
watch的使用
watch(msg,(newval,oldval)=>{
console.log(newval,oldval)
},{
immediate:true,
deep:true
})
watch([str,msg],(newval,oldval)=>{
console.log(newval,oldval)
})
监听对象中的属性
watch(()=>obj.age,(newval,oldval)=>{
console.log(newval,oldval)
})
路由
let router = new useRouter
router.push('/home')
let route = new useRoute;
route.query.msg
插槽:(匿名插槽, 具名插槽)暂写这两个
匿名:
<slot></slot>
具名:
<template #xxx></template>
<slot name='xxx'></slot>
传送teleport
把要传送的元素放在子元素前面
<teleport to='.box'>这是传送</teleport>