ref
vue2.0 | vue3.0 |
---|---|
:ref赋值多个,得到一个数组 | :ref赋值多个, 得到一个函数 |
vue2.0代码示例:
<h :ref="doRef"></h>
this.doRef is Array
vue3.0代码示例:
<h :ref="doRef"></h>
method: {
doRef(el){
if(el) {
refs.push(el)
}
}
}
$children
vue2.0 | vue3.0 |
---|---|
获取子组件 this.$children | 删除children属性,通过ref获取子组件。this.$refs.demo |
slot
vue2.0 | vue3.0 |
---|---|
<tem slot="demo" solt-scope="scope"></tem> | 去掉 <tem slot="demo" solt-scope="scope"></tem> 写法使用 #demo ,v-slot:demo 等方式 |
响应式更新升级
vue2.0 | vue3.0 |
---|---|
defineproperty,手动监听数组等特殊数据修改 | proxy ,自动监听数组数据修改 |
datalist = [{id:1,name: '张三'},{id: 2, name:'李四'}]; this.datalist[1] = {id: 2, name:'王五'} ;页面不修改 | datalist = [{id:1,name: '张三'},{id: 2, name:'李四'}]; this.datalist[1] = {id: 2, name:'王五'}; 页面修改 |
composition
vue3.0 引进新特性composition
- reactive、ref、setup 的使用
import { reactive , ref } from vue
setup(){
let num = ref(1)
let demo = reactive(1)
function setNum(){}
num++
}
return {
num,
demo,
setNum
}
- setup 必须有return, 才可以使用数据、以及方法,响应式
- 更加灵活
- 没有this
- setup 执行时,组件未被创建
生命周期
vue2.0 | vue3.0 |
---|---|
beforeCreate... | setup, on(mounted); 使用时,记得引用import{onmounted}from vuesetup(){onmounted(()=>{})} |
vite
vite 代码编译
|vue2.0|vue3.0|
|-------|-------|
|webpack 编译全局|vite编译代码,仅编译修改处,局部编译; 编译速度快|
vue3.0 + typescript
typescript
强类型,类型注解,明确函数返回数据类型。
vue3.0
- 声明、生命周期、事件等放在setup(), 函数里面,并且return。
- const = getCurrentInstance();相当于 vue2.0 的 this 对象
定义data
ref 定义响应基础数据
例子: let state = ref(false)
赋值: state.value = true
获取: state.value
reactive: 定义响应的对象类型
例子: let config = reactive({
lang: “ts”,
v: 0.5
})
赋值: config.lang = 'js'
获取: config.lang
toRefs: 将响应式对象转换普通对象
例子:let configdata = toRefs(config)
数据watch
- 基础类型监听:watch(show, (newVal, oldVal)=>{} )
- 对象类型监听:watch(()=> showobj.show, (newval, oldval)=> {})
router路由
useRouter()获取路由实例,跳转页面等
例子:
const router = useRouter()
router.push({name: '/'})
useRoute() 获取路由参数等
例子:
const route = useRoute()
route.path
父子传值通信
子组件A:
定义:
emits:['update:show', 'handleclose']
处理emit:
const close = ()=> {
context.emit('update:show', false) // 可以修改父级参数
constext.emit('handleclose', 'hello')
}
父组件:
使用组件:
<A v-model:show="data.show" @handleclose="close"></A>
处理事件:
const close = (detail) => {}