打卡学习
1.什么是 SPA?
SPA(Single Page Application), 单页面应用程序, 使用vue, react, angular 创建的项目都属于 SPA. 因为整个项目只有一个页面, 其他页面都是在该页面的基础上局部刷新而来的.传统方式创建的项目都是 MPA(Mutilple Page Application)多页面应用程序.
2.什么是 ssr? 如何实现 ssr?
ssr 是全拼(server side rendering) ,中文意思, 服务端渲染, 让页面的渲染在服务端完成, 生产环境必须部署nodeJS 的环境, 因为服务端渲染必须借助 nodeJS 来完成. vue 中可以使用 nuxt 框架实现服务端渲染.
3.使用 vue,react,angular 开发的 SPA 单页面应用有什么优缺点?
单页面应用虽然性能方面得到了提升, 但是有一个致命的缺点就是不利于 seo, 搜索引擎几乎不会抓取单页面应用.
4.Vue.use(plugin)的作用是什么, 使用的时候需要注意什么问题?
Vue.use 的作用是安装一个 Vue 插件, 该方法需要在调用 new Vue()之前被调用.
5.vm.$nextTick(fn)的作用是什么?
延迟某个操作的执行, 直到 dom 更新以后在执行.
<body>
<div id="app"><h1 ref="h1">{{title}}</h1></div>
</body>
<script>
let vm = new Vue({
el: '#app',
data() {
return {
title: '这是一个标题'
}
},
created() {
this.$nextTick(() => {
// 在 created 里直接操作 ref 会报错
this.$refs.h1.innerHTML = '这是更新以后的标题';
})
}
})
</script>
6.vue 中的混入(mixin)有什么作用?
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。当组件和混入对象含有同名选项时，这些选项将以恰当的方式进“合并”。比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前用.
7.某某公司 vue 机试题
HTML 部分
<div id="app">
<div>
<input type="text" v-model="phone1">
<button @click="getHandle">get测试</button>
<span>{{res1}}</span>
</div>
<div>
<input type="text" v-model="phone2">
<button @click="postHandle">post 测试</button>
<span>{{res2}}</span>
</div>
</div>
JS 部分
new Vue({
el: "#app",
data() {
return {
phone1: 123,
phone2: 456,
res1:'',
res2:'',
baseUrl:'http://47.96.26.207:8099/api/Users'
}
},
methods: {
getHandle() {
axios.get(`${this.baseUrl}/GetTest?phone=${this.phone1}`,).then((data)=>{
this.res1 = data.result
})
},
postHandle() {
axios.post(`${this.baseUrl}/PostTest?phone=${this.phone2}`,).then(({data})=>{
this.res2 = data.result
})
}
}
})
8.如何开发一个 vue 插件?
Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象.
const myPlugin = {
install: (Vue, options) => {
// 1.添加全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑..
}
// 2.添加全局指令
Vue.directive('my-directive', {
bind(el, binding, vnode, oldVnode) {
// 逻辑...
}
})
// 3.添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑..
}
// 4.注入组件选项(混入)
Vue.mixin({
created: function () {
//...
}
})
// 5.注册全局组件
Vue.component('myComponent', {
template: `<h1>loading...</h1>`
})
}
}
export default myPlugin;
// 调用插件
Vue.use(myPlugin, {})
9.vuex是什么
state：vuex 的基本数据，用来存储变量getter：从基本数据(state)派生的数据，相当于 state 的计算属性mutation：提交更新数据的方法，必须是同步的(如果需要异步使用 action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。action：和 mutation 的功能大致相同，不同之处在于 ==》- Action 提交的是 mutation，而不是直接变更状态。
- Action 可以包含任意异步操作。
modules：模块化 vuex，可以让每一个模块拥有自己的 state、mutation、action、getters,使得结构非常清晰，方便管理。
vuex 中的 state 存储在哪里--内存
10.简要介绍 vuex 各模块在流程中的功能
Vue Components：Vue 组件。HTML 页面上，负责接收用户操作等交互行为，执 dispatch 方法触发对应action进行回应。
- dispatch：操作行为触发方法，是唯一能执行 action 的方法。 · actions：操作行为处理模块,由组件中的 $store.dispatch(‘action 名称’,data1)来触发。
然后由commit()来触发 mutation 的调用 , 间接更新state。
负责处理 Vue Components 接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台 API 请求的操作就在这个模块中进行，包括触发其他 action 以及提交 mutation 的操作。该模块提供了Promise 的封装，以支持 action 的链式触发。
-
commit：状态改变提交操作方法。对 mutation 进行提交，是唯一能执行 mutation 的方法
-
mutations：状态改变操作方法，由 actions 中的 commit(‘mutation 名称’)来触发。是Vuex 修改 state 的唯一推荐方法。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些 hook暴露出来，以进行 state 的监控等。
-
state：页面状态管理容器对象。集中存储 Vue components 中 data 对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用 Vue 的细粒度数据响应机制来进行高效的状态更新。
-
getters：state 对象读取方法。图中没有单独列出该模块，应该被包含在了 render 中，Vue Components 通过该方法读取全局 state 对象。
