1、vue.js v3设计初衷
2、3.0版本有何优势？
3、相比于vue2的移除
4、相比于vue2的新增
5、vue3 项目初始化及注意事项
6、Vue3 Hook对比React Hook
vue.js v3设计初衷
Vue是一套用于构建用户界面的渐进式框架，7月18号，Vue.js 作者尤雨溪宣布 Vue 3 已进入RC 阶段，在9月份，正式发布release版本。
缺点：
- 无法检测到数组的下标和length属性的变更，无法检测到对象属性的动态添加和删除
- 复杂组件难以复用
- 响应化过程需要递归遍历消耗较大
- 项目过大维护任务艰巨
3.0版本有何优势
1.Performance
虚拟Dom初始化，ssr，更新效率
2.definePropety => JS Proxies
缺点：ie11
3.Tree-shaking support
* Vue.observable (用 Vue.reactive 替换)
* Vue.nextTick
* Vue.version
* Vue.compile
* Vue.set
* Vue.delete4..Composition API ★
5.Better TypeScript support
6.Custom Renderer API
...
相比vue2的移除
1、API方面
* $on
* .$once
* $off
* Vue.config.productionTip
* 内联模板 attribute
* $destroy 实例方法2、生命周期
* beforeDestroy
* destroyed3、过滤器
* filters4、修饰符
* 键码作为 v-on 修饰符//局部
//全局
Vue.config.keyCodes = {
f1: 112
}* v-bind的 .sync5、props里默认函数访问this
6、solt
// 2.x 语法
this.$scopedSlots.header7、组件的 model 选项
8、eventBus =>mitt
...
相比vue2的新增
1、目录树形图
2、Main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.config.ignoredElements = [/^app-/]
app.use(/* ... */)
app.component(/* ... */)
app.directive(/* ... */)
app.mount('#app')3、自定义指令
//2.0
const MyDirective = {
bind(el, binding, vnode, prevVnode) {},
inserted() {},
update() {},
componentUpdated() {},
unbind() {}
}
//3.x
const MyDirective = {
beforeMount(el, binding, vnode, prevVnode) {},
mounted() {},
beforeUpdate() {},
updated() {},
beforeUnmount() {}, // new
unmounted() {}
}4、$on.$once.$off 移除，$emit保留
5、setup() 函数
| 生命周期 | beforeCreate | beforeCreate |
|---|---|---|
| setup | ||
| created | created | |
| beforeMount | onBeforeMount | |
| mounted | onMounted | |
| beforeUpdate | onBeforeUpdate | |
| updated | onUpdated | |
| onBeforeUnmount | ||
| onUnmounted | ||
| errorCaptured | onErrorCaptured | |
| onRenderTracked | ||
| onRenderTriggered |
setup(props,context) {
/* attrs isServer
* contenxt => emit listeners ssrContent
*/ parent refs
root slots
}* ref
* context6.Fragment多根节点
<./div>
<./div>
7.Teleport ()
Tooltips with Vue 3 Teleport<./h3>
<./modal-button>
const app = Vue.createApp({});
app.component('modal-button', {
template: `
`,
data() {
return {
modalOpen: false
}
}
})
8.Suspense + 异步组件
Loading...
import { defineAsyncComponent } from 'vue'
import ErrorComponent from './components/ErrorComponent.vue'
import LoadingComponent from './components/LoadingComponent.vue'
// 不带选项的异步组件
const asyncPage = defineAsyncComponent(() => import('./NextPage.vue'))
// 带选项的异步组件
const asyncPageWithOptions = defineAsyncComponent({
loader: () => import('./NextPage.vue'),
delay: 200,
timeout: 3000,
errorComponent: ErrorComponent,
loadingComponent: LoadingComponent
})
9.v-model
v-model prop 和事件默认名称已更改
prop：value -> modelValue；
event：input -> update:modelValue；
9.Composition API
* *reactive()*
import { reactive } from 'vue'
setup() {
const state = reactive({
num:0
});
return state;
}
* *ref()*
import { ref } from 'vue'
setup() {
const count = ref(0);
return {
count
}
}
* *computed()*
const count = ref(1)
const doubleCount = computed(() => count.value * 2)
const count = ref(1)
const doubleCount = computed({
get: () => (count.value),
set: val => {
count.value = val * 2
}
})
* *readonly()*
const state = reactive({ count: 0 })
const status= readonly(state)
* *watchEffect()*
const count = ref(0)
watchEffect （() => console.log(count.value))
var stop=watchEffect(() => console.log(count.value))
stop()
* *watch()*
const state = reactive({ count: 0 })
watch(
() => state.count,
(newVal, oldVal) => {
}
)
const count = ref(0)
watch(count, (newVal, oldVal) => {
})
onst ref1= ref(1)
onst ref2= ref(2)
watch([ref1, ref2], ([newVal1, oldVal2], [newVal1, oldVal2]) => {
})
...
Vue3项目初始化
1.初始化工具
vite （ESM +Rollup）
- 快速的冷启动
- 即时的模块热更新
- 真正的按需编译
npm init vite-app project
yarn create vite-app project
vue-cli @4.5.0 +
Comments | NOTHING