前端知识点整理(一)vue部分

1.MVVM
model-view-viewModel,model是数据与业务逻辑,view是UI界面,viewModel是一个对象用于实现model与view的同步。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来。

2.双向数据绑定
vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的settergetter,在数据变动时发布消息给订阅者,触发相应的监听回调。

3.MVVM 与MVC
主要区别是controller控制器演变成了viewModel,不用手动将model数据更新到view,减少了大量dom操作,提升了页面渲染性能。

4.生命周期
创建前/后:
  在beforeCreate阶段,vue实例的挂载元素el和数据对象data都为undefined,还未初始化。
  在created阶段,vue实例的数据对象data有了,el还没有。
载入前/后:
  在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。
  在mounted阶段,vue实例挂载完成,data.message成功渲染。
更新前/后:
  当data变化时,会触发beforeUpdate和updated方法。
销毁前/后:
  在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在

5.父子组件通信
父组件在标签上定义传值,子组件通过props接受传值;父组件在标签上定义传递方法,子组件通过$emit调用父组件的方法并传递参数。

6.组件的定义使用
一般在components目录创建自定义组件;在需要的页面导入import from;在components属性上面注入自定义组件;在template视图view中使用;

7.关于路由
声明式路由:<router-link :to="">
编程式路由:
  router.push({ name: 'user', params: { userId: 123 }});命名的路由
  router.push({ path: 'register', query: { plan: 'private' }});带查询参数的路由,有path会忽视params

8.vue配合webpack 按需加载
不进行页面按需加载引入方式:import home from '../../common/home.vue'
进行页面按需加载的引入方式:const home = r => require.ensure( [], () => r (require('../../common/home.vue')))

9.关于store
state:全局状态;
getter:store的扩展,类似state的计算属性
mapState/mapGetter辅助函数帮助我们生成计算属性,一般结合扩展运算符...mapState()用于vue实例中的computed:
mutations:包含事件类型和回调函数:
state: {
  count: 1
},
mutations: {
  increment (state,n) {
    // 变更状态
    state.count += n;
  }
}
调用:store.commit('increment',10);
mutation 都是同步事务
actions: actions 提交的是 mutations,而不是直接变更状态;actions可以包含异步操作;实际的购物车示例,涉及到调用异步 API 和分发多重 mutation
actions: {
  checkout ({ commit, state }, products) {
    // 把当前购物车的物品备份起来
    const savedCartItems = [...state.cart.added]
    // 发出结账请求,然后乐观地清空购物车
    commit(types.CHECKOUT_REQUEST)
    // 购物 API 接受一个成功回调和一个失败回调
    shop.buyProducts(
      products,
      // 成功操作
      () => commit(types.CHECKOUT_SUCCESS),
      // 失败操作
      () => commit(types.CHECKOUT_FAILURE, savedCartItems)
    )
  }
}
module:模块儿

10.<keep-alive></keep-alive> 缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。

11.v-el提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标.可以是 CSS 选择器,也可以是一个 HTMLElement 实例

12.vue使用插件的步骤
一般在入口js文件main.js中vue实例化之前,采用import导入,或者采用require导入,然后vue.use()
例如:
import ElementUI from 'element-ui'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(ElementUI)
Vue.use(VueAwesomeSwiper)

13.vue中常用的生命周期钩子函数
created:实例已经创建完成之后调用,实例已经完成数据观测,属性和方法的运算,watch/event事件回调。挂在阶段没有开始,$el属性目前还不可见;
mounted:el被新创建的$el替换,并挂载到实例上去之后调用该钩子,
activated: keep-alive 组件激活时调用

14.activeclass 是vue-router模块的router-link组件的属性。

15.怎么定义vue-router的动态路由?如何获取传过来的动态参数?
在router目录下的index.js文件中,对path属性加上/:id;
使用router对象的params.id;this.$route.query或者this.$route.params

16.vue-router有哪几种导航钩子?
全局导航钩子:
  //定义一个路由
  const router = new VueRouter({ ... })
  // 点击导航前调用
  router.beforeEach((to, from, next) => {})
  // 点击导航后调用
  router.afterEach(route => {})
单个路由独享的钩子:
  const router = new VueRouter({
    routes: [
      {
        path: '/foo',
        component: Foo,
        beforeEnter: (to, from, next) => {},
      }
    ]
  });
组件内的钩子:
  beforeRouteEnter (to, from, next) {},
  beforeRouteUpdate (to, from, next) {},
  beforeRouteLeave (to, from, next) {}
  router.beforeEach(to,from,next),作用:跳转前进行判断拦截。

17.什么是vue生命周期
答: Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。

18.vue生命周期的作用是什么
答:它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

19.vue生命周期总共有几个阶段
答:可以总共分为8个阶段:创建前/后, 载入前/后,更新前/后,销毁前/销毁后

20.第一次页面加载会触发哪几个钩子
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

21.DOM 渲染在 哪个周期中就已经完成
答:DOM 渲染在 mounted 中就已经完成了。

22.简单描述每个周期具体适合哪些场景
beforecreate : 可以在这加个loading事件,在加载实例时触发
created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用
mounted : 挂载元素,获取到DOM节点
updated : 如果对数据统一处理,在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作dom
  //改变数据
  vm.message = 'changed'
  //想要立即使用更新后的DOM。这样不行,因为设置message后DOM还没有更新
  console.log(vm.$el.textContent) // 并不会得到'changed'
  //这样可以,nextTick里面的代码会在DOM更新后执行
  Vue.nextTick(function(){
    console.log(vm.$el.textContent) //可以得到'changed'
  })

23.说出至少4种vue当中的指令和它的用法?
v-if:判断是否隐藏;v-for:数据循环;v-bind:绑定一个属性;v-model:实现双向绑定

24.vue-loader是什么?使用它的用途有哪些?
.vue文件的一个加载器,解析和转换.vue文件,将其中的js css html提取并交由相应的解析器。
用途:js可以写es6、style样式可以scss或less、template可以加jade等

25.scss是什么?在vue.cli中的安装使用步骤是?有哪几大特性?
答:css的预编译。
使用步骤:
第一步:先装css-loader、node-loader、sass-loader等加载器模块
第二步:在build目录找到webpack.base.config.js,在那个extends属性中加一个拓展.scss
第三步:在同一个文件,配置一个module属性
第四步:然后在组件的style标签加上lang属性 ,例如:lang=”scss”
特性:
可以用变量,例如($变量名称=值);
可以用混合器,例如()
可以嵌套

26.为什么使用key?
避免某些标签元素的复用;采用v-for渲染列表时,如果数据项的顺序变了,如果不用key,vue就会复用已存在的元素,达不到想要的真实顺序。

27.VNode是什么?虚拟 DOM是什么?
Vue在 页面上渲染的节点,及其子节点称为“虚拟节点 (Virtual Node)”,简写为“VNode”。“虚拟 DOM”是由 Vue 组件树建立起来的整个 VNode 树的称呼。

28.$set
Vue 不能检测到对象属性的添加或删除。Vue 不能检测以下变动的数组:
1. 当你利用索引直接设置一个项时,例如: vm.item[index] = newValue
2. 当你修改数组的长度时,例如: vm.items.length = newLength
可以使用Vue.set(object, key, value) 和 this.$set(object, key, value)

29.插槽<slot>

30.axios是什么?怎么使用?描述使用它实现登录功能的流程?
答:请求后台资源的模块。npm install axios -S装好,然后发送的是跨域,需在配置文件中config/index.js进行设置。
后台如果是Tp5则定义一个资源路由。js中使用import进来,然后.get或.post。返回在.then函数中如果成功,失败则是在.catch函数中

31.axios+tp5进阶中,调用axios.post(‘api/user’)是进行的什么操作?axios.put(‘api/user/8′)呢?
答:跨域,添加用户操作,更新操作。

32.自定义指令(v-check、v-focus)的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?
答:
全局定义指令:在vue对象的directive方法里面有两个参数,一个是指令名称,另外一个是函数。
组件内定义指令:directives
钩子函数:bind(绑定事件触发)、inserted(节点插入的时候触发)、update(组件内相关更新)
钩子函数参数:el、binding

33.Vue的双向数据绑定原理是什么?(vue data是怎么实现的?)
答:vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
具体步骤:
第一步:需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter
这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化
第二步:compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图
第三步:Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。
第四步:MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。

34.聊聊你对Vue.js的template编译的理解?
答:简而言之,就是先转化成AST树,再得到的render函数返回VNode(Vue的虚拟DOM节点)
详情步骤:
首先,通过compile编译器把template编译成AST语法树(abstract syntax tree 即 源代码的抽象语法结构的树状表现形式),
compile是createCompiler的返回值,createCompiler是用以创建编译器的。另外compile还负责合并option。
然后,AST会经过generate(将AST语法树转化成render funtion字符串的过程)得到render函数,render的返回值是VNode,
VNode是Vue的虚拟DOM节点,里面有(标签名、子节点、文本等等)

工欲善其事 必先利其器
原文地址:https://www.cnblogs.com/fengyouqi/p/9562486.html