• 前端知识点整理(一)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节点,里面有(标签名、子节点、文本等等)

    工欲善其事 必先利其器
  • 相关阅读:
    杭电2083(简易版之最短距离)
    南阳17(单调递增最长子序列)
    杭电1009(FatMouse' Trade)
    Oracle—用户管理的备份(一)
    Retinex processing for automatic image enhancement 翻译
    POJ 1151
    ISO3834认证所需的部分标准
    2013年19个最棒的HTML5网站模板免费下载
    自定义 Preference Header 布局
    [置顶] chinayaosir近10年来所阅读的世界著名IT书籍-图文并茂
  • 原文地址:https://www.cnblogs.com/fengyouqi/p/9562486.html
Copyright © 2020-2023  润新知