说说 vue 3.0 有哪些方面的变动呢*
- 更好的类型推导能力
- 更大的代码压缩空间
- 更友好的tree shaking 支持
- 更灵活的逻辑复用
- data数据 ref
2.0 vue中的 ref 是对界面元素的引用 3.0 vue 中 引用传递
- Method函数 reactive
- Hooks生命周期 onMounted
- computed计算属性 computed
- props传值
- emit
vue3.0 中没有this
- components
<template>
<!-- template之前必须有且只有一个根节点，现在3.0 可以多个节点 -->
<div>hello {{ title }} {{ count}}</div>
<div>double {{ doubleCount }}</div>
<div>{{ state.message }}</div>
<button @click="increment">button</button>
<button text="Foo"></button>
</template>
<script>
// 需要什么功能就从vue中要
import { defineComponent, ref, reactive, computed, onMounted } from 'vue'
import Button from './components/button.vue';
export default defineComponent({
components: {
Button
},
setup () { //组件初始化执行时创建
//创建引用
const count = ref(0)
const state = reactive({
message :'vue 3'
})
const increment = () => {
count.value++
state.message = '111'
}
const doubleCount = computed(() => count.value * 2)
onMounted(() => {
console.log('mounted')
})
return {
title: 'Vue.js 3.0',
count,
state,
doubleCount,
increment
}
}
})
</script>
vue 3.0 还没正式发布，一些功能还在完善...
