1 compiler 优化
- 1
1）对于一些静态标签 node 不在做处理 (hoistStatic --> ssr优化)
2）静态绑定的class， id 不再做更新处理
3）动态的node 会打包 一个标记 ( patchFlag ), 进行更新分析 ( 动态绑定 )
实例：
静态node不做更新处理
QQ截图20210407143300.png
QQ截图20210407143510.png
把静态 动态数据区分处理，可以提升性能
- 2
1）事件监听器 Cache 缓存处理 ( cacheHandlers )
cacheHandlers 未开启
cacheHandlers 开启后
优点：如果是页面要 复用 一个组件的话，组件中注册的事件不用 多次创建这个函数代码块( 不会多次实例化重复函数，提升浏览器性能)
2）hoistStatic 自动针对多静态节点进行优化，直接输出字符串
ssr 优化
把静态 动态资源分开，将函数注入进压缩的静态资源(提升性能)
-
3
按需加载
什么都没有的情况的函数引入.png
只编译个 div的 情况.png
引入 input 事件绑定 的情况.png
引入 transition 情况.png
根据需要渲染的node 按需加载函数方法(减少代码体积，提升性能)
2 新增特性
ts支持
Fragment Teleport Suspense
- Fragment 不受根节点限制 渲染函数可接受Array
- Teleport 类似Portal 随用随取，弹窗
- Suspense 嵌套的异步依赖 async / setup()
3 按需加载 （配合vite）& 组合api
- 只打包用到的代码块
4 组合式api学习
为什么用 composition api
+ 1）vue2 逻辑复用方式
+ mixin （命名空间冲突 逻辑不清晰 不易复用）
+ scoped solt 作用域插槽 （配置型多 代码分裂 性能差）
+ vue 对ts 支持不充分
+ 2） 代码复用方法 mixin filter 有缺陷
+ 3） vue2 对 ts 支持不充分
- 创建项目
版本
node
vue create demo 创建项目 // 有vue3 的模板项目
也可选择vue3.0 手动选项.png
-
- 相关api学习
- setup 组件选项
// src/components/UserRepositories.vue
export default {
components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
setup(props) { //props父组件的传参
console.log(props) // { user: '' }
return {} // 这里返回的任何内容都可以用于组件的其余部分
}
// 组件的“其余部分”
}
- 带 ref 的响应式变量
<template>
<div class="hello">
<input type="text" v-model="num1">
<input type="text" v-model="num2">
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
name: 'HelloWorld',
setup () {
const num1 = ref(0)
const num2 = ref(0)
return {
num1, num2
}
}
})
</script>
- reactive （设置响应数据）
template>
<div class="hello">
<input type="text" v-model="state.num1" @keyup="add()">
<input type="text" v-model="state.num2" @keyup="add()">
{{state.result}}
</div>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue'
export default defineComponent({
name: 'HelloWorld',
setup () {
const state = reactive({
num1: 0,
num2: 0,
result: 0
})
function add () {
state.result = parseInt(state.num1) + parseInt(state.num2)
}
return {
state, add
}
}
})
</script>
- 独立的 computed 属性
<template>
<div class="hello">
<input type="text" v-model="state.num1">
<input type="text" v-model="state.num2">
{{state.result}}
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, computed } from 'vue'
export default defineComponent({
name: 'HelloWorld',
setup () {
const state = reactive({
num1: 0,
num2: 0,
result: computed(() => parseInt(state.num1) + parseInt(state.num2))
})
return {
state
}
}
})
</script>
- 父子组件传值
// 子组件
<template>
<div class="hello">
<input type="text" v-model="state.num1">
<input type="text" v-model="state.num2">
{{state.result}}
<button @click="clickEvent()">aaa</button>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, computed } from 'vue'
export default defineComponent({
name: 'HelloWorld',
props: {
msg: String
},
setup (props, { emit }) { // props 父组件传过来的数据 //emit 相当于this.$emit
const state:any = reactive({
num1: 0,
num2: 0,
result: computed(() => parseInt(state.num1) + parseInt(state.num2))
})
const clickEvent = () => {
emit('sendMsg', state.result) //触发给父组件
}
return {
state,
clickEvent
}
}
})
</script>
-------------------------------------------------------------------
// 父组件
<template>
<div class="home">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App" @sendMsg="handleAdd"/>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src
export default defineComponent({
name: 'Home',
components: {
HelloWorld
},
setup () {
const handleAdd = (value: number) => {
console.log('aaa', value) // 接收数据
}
return {
handleAdd
}
}
})
</script>
-
生命周期函数
因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。
// 父组件
<template>
<MyMarker />
</template>
<script>
import { provide } from 'vue'
import MyMarker from './MyMarker.vue
export default {
components: {
MyMarker
},
setup() {
provide('location', 'North Pole')
provide('geolocation', {
longitude: 90,
latitude: 135
})
}
}
</script>
// 子组件
<script>
import { inject } from 'vue'
export default {
setup() {
const userLocation = inject('location', 'The Universe')
const userGeolocation = inject('geolocation')
return {
userLocation,
userGeolocation
}
}
}
</script>
- vite 学习
npm install -g create-vite-app
npm init vite-app demo
cd demo
cnpm install // npm 安装有问题
npm run dev
