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) => {}