Performance
Tree shaking
Fragment
<Teleport>
<Portal> [ˈpɔːtl]
,译作传送门 <Suspense>
TypeScript
Custom Renderer API
Composition API
Proxy
响应式原理不再基于 Object.defineProperty
基于vue/cli配置3.0
目前vue3.0处于beta版
https://github.com/vuejs/vue-next
vue-cli-plugin-vue-next
$ npm install -g @vue/cli
$ vue --version
$ vue create xxx
$ vue add vue-next
"dependencies": {
"vue": "^3.0.0-beta.1"
},
"devDependencies": {
"@vue/compiler-sfc": "^3.0.0-beta.1",
"eslint-plugin-vue": "^7.0.0-alpha.0",
"vue-cli-plugin-vue-next": "~0.1.3"
},
eslintConfig": {
"extends": [
"plugin:vue/vue3-essential"
]
}
基于vite配置vue3.0
由 vue 作者尤雨溪开发的 web 开发工具
https://github.com/vitejs/vite
$ npm init vite-app xxx
$ cd xxx
$ npm install
$ npm run dev
$ npm run build
setup与响应式API
setup
setup 函数是一个新的组件选项,作为在组件内使用 Composition API 的入口点
props是响应式的,可以基于watchEffect/watch监听,解构赋值后则无效
export default {
props: {
title: String,
},
// 传入 {title} 则无效
setup(props) {
watchEffect(() => {
console.log(`title is: ` + props.title);
});
}
};
返回的变量只直接在模板中使用
export default {
props: { title: String },
setup() {
return {
};
}
};
ref
接受一个参数值并返回一个响应式且可改变的 ref 对象
import { ref } from "vue";
export default {
setup() {
let supNum = ref(0),
oppNum = ref(0);
let change = lx => {
lx === 0 ? supNum.value++ : oppNum.value++;
};
return {
supNum,
oppNum,
change
};
}
};
reactive
接收一个普通对象然后返回该普通对象的响应式代理 等同于 2.x 的 Vue.observable()
import { ref, reactive } from "vue";
export default {
props: { title: String },
setup() {
let state = reactive({
supNum: 0,
oppNum: 0,
arr: [10, 20]
});
let change = lx => {
lx === 0 ? state.supNum++ : state.oppNum++;
// 比Object.defineProperty好用在于:对于数据或者并未初始化的对象成员,都可以随意修改值,而且具备响应式的效果
state.arr[0] = state.arr[0] + 1;
state.name = "";
};
return {
//...toRefs(state),
state,
change
};
}
};
computed
传入一个 getter 函数,返回一个默认不可手动修改的 ref 对象
const count = ref(1);
const plusOne = computed(() => count.value + 1);
console.log(plusOne.value); //2
plusOne.value++; //错误!
或者传入一个拥有 get 和 set 函数的对象,创建一个可手动修改的计算状态
import { ref, reactive, toRefs, computed } from "vue";
export default {
props: { title: String },
setup() {
......
// 计算属性
let ratio = computed({
get: () => {
let total = state.supNum + state.oppNum;
return total === 0
? "--"
: ((state.supNum / total) * 100).toFixed(2) + "%";
}
});
return {
......,
ratio
};
}
};
watchEffect
立即执行传入的一个函数,并响应式追踪其依赖,并在其依赖变更时重新运行该函数(执行实际取决于函数内涉及到的变量)
export default {
props: {
title: String,
},
setup(props) {
watchEffect(() => {
console.log(`title is: ` + props.title);
});
}
};
watch
watch API 完全等效于 2.x this.$watch
此外还有一些unref / toRef / toRefs / isRef / isProxy / isReactive / isReadonly 也是一些响应式api
生命周期函数
可以直接导入 onXXX 一族的函数来注册生命周期钩子
与 2.x 版本生命周期相对应的组合式 API
beforeCreate
setup()
created
setup()
beforeMount
-> onBeforeMount
mounted
-> onMounted
beforeUpdate
-> onBeforeUpdate
updated
-> onUpdated
beforeDestroy
-> onBeforeUnmount
destroyed
-> onUnmounted
errorCaptured
-> onErrorCaptured
新增的钩子函数
onRenderTracked
onRenderTriggered
两个钩子函数都接收一个 DebuggerEvent
,与 watchEffect
参数选项中的 onTrack
和 onTrigger
类似:
export
default
{
onRenderTriggered(e)
{
debugger
// 检查哪个依赖性导致组件重新渲染
},}
main.js创建入口方式的变化
import {
createApp
} from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
使用createApp来创建入口
以上就是目前为止vue的beta版的简单使用笔记,vue目前稳定的版本:2.6.x,后续出 2.7.x 版本(加入部分vue3内容),维护18个月之后,除安全漏洞更新之外,其余的不再继续更新~~ vue3.0在使用中兼容vue2.0的信息
api链接:https://composition-api.vuejs.org/zh/api.html
感谢周老师的资料帮助~