最后
除了简历做到位,面试题也必不可少,整理了些题目,前面有117道汇总的面试到的题目,后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。
import { reactive } from ‘vue’;
export const state = reactive({ counter: 0 });
从 reactive
函数返回的 Proxy
对象是可以跟踪其属性更改的对象。在组件模板中使用时,当响应值发生更改时,组件都会重新渲染。
<button type=“button” @click=“state.counter++”>Increment
可用性
上面的示例对于单个组件非常有用,但是其他组件无法访问状态。为了克服这个问题,你可以使用 provide
和 inject
方法,使 Vue 3
应用中任何指都能访问到。
import { reactive, provide, inject } from ‘vue’;
export const stateSymbol = Symbol(‘state’);
export const createState = () => reactive({ counter: 0 });
export const useState = () => inject(stateSymbol);
export const provideState = () => provide(
stateSymbol,
createState()
);
当您将 Symbol
作为键和值传递给 provide
方法时,该方法中的任何子组件都可以使用该值。Symbol
提供和检索值时,key
使用相同的名称。
这样,如果你在最顶层的组件上提供值,那么它将在所有组件中可用。另外,还可以在主应用程序实例上调用 provide
。
import { createApp, reactive } from ‘vue’;
import App from ‘./App.vue’;
import { stateSymbol, createState } from ‘./store’;
const app = createApp(App);
app.provide(stateSymbol, createState());
app.mount(‘#app’);
让代码更加健壮
上面的解决方案有效,但有一个缺点:你不知道是谁修改了什么。状态可以直接更改,没有限制。
你可以使用 readonly
函数将状态包装起来,用以保护状态。它覆盖了在 Proxy
对象中传递的变量,该代理对象阻止任何修改(在尝试修改时发出警告)。这些变化可以由能够访问可写存储的单独函数来处理。
import { reactive, readonly } from ‘vue’;
Vue 编码基础
2.1.1. 组件规范
2.1.2. 模板中使用简单的表达式
2.1.3 指令都使用缩写形式
2.1.4 标签顺序保持一致
2.1.5 必须为 v-for 设置键值 key
2.1.6 v-show 与 v-if 选择
2.1.7 script 标签内部结构顺序
2.1.8 Vue Router 规范
Vue 项目目录规范
2.2.1 基础
2.2.2 使用 Vue-cli 脚手架
2.2.3 目录说明
2.2.4注释说明
2.2.5 其他