Vue复习

·  阅读 323
大个女啦,不要总是依赖别人,要做一个被人需要的人,在找工作,先复习一波,加油!
前端小白,有错误请各位大佬指出,谢谢谢谢!!!
复制代码

整理了一些自己认为面试中会问到的知识,很乱--给自己看的,如果有错误请大神赐教,谢谢各位哈~~~

1.Vue的优点

        体积小、虚拟DOM(无DOM操作)、双向数据绑定、易上手入门简单

2.Vue中的MVVM模型原理

      MVVM是Model-View-ViewModel的缩写,它是一种软件架构风格。当View(视图层)发生改变时,会自动更新到视图模型(ViewMode),反之亦然,这就是常说的数据绑定。

3.Vue的生命周期及其****钩子函数

vue实例从创建到销毁的过程就是生命周期。

vue的生命周期一共有4个阶段,分别是:

创建前/后

    创建前(beforeCreate()):实例的挂载元素el和数据对象data都为undefined,还未初始化。应用场景:在此处加loading事件。

    创建后( created() ):实例的数据对象data有了,el还没有。应用场景:结束loading事件。

挂载前/后

    挂载前( beforMount() ):模板已获取到,但是数据未挂载到模板上。

    挂在后( mounted() ):数据已经挂载到模板中。应用场景:发送AJAX。

更新前/后

    更新前/后( beforUpdate() /updated() ) :当data变化时,会触发这两个方法。

销毁前/后

    销毁前/后( beforDestroy() /deestroy() ):执行deestroy方法后,data的更新不会再触发周期函数,说明这时vue实例已解除了监听事件和对dom的绑定,但dom的结构依然存在。

Vue生命周期 三个阶段:初始化阶段 更新阶段 销毁阶段 阶段一:初始化阶段 创建前beforeCreate() Vue 实例创建前被调用,数据和模板均未获取到(挂载点还没有,数据还没有准备好) 

创建后created() Vue实例创建后,最早可以获取到data数据的钩子,但是模板未获取到 (已经可以获取到data里面的数据,但是还没有拿到挂载点) 建议在这里面发送 ajax 异步请求(最好在created钩子发ajax请求数据,下面的钩子都能发,但是在update之后重新挂载消耗性能) (提前拿到数据,挂载的时候就有数据了) 

 挂载前beforeMount() 数据挂载之前,获取到了模板,但是数据还未挂载到模板上 (挂载点已找到,数据也准备好,但是还未渲染到节点里面) 

挂载后mounted() 数据已经挂载到模板中了 

2.更新阶段(数据有变化就触发) 更新前beforeUpdate() 当data 数据更新之后,去更新模板中的数据前调用 更新后updated() 

3.销毁阶段(主动销毁: $destroy();路由切换组件的时候,组件也会被销毁) 销毁前beforeDestroy() 销毁 Vue 实例之前调用 收尾工作:系统做:销毁data里面的数据,和解绑事件;主动做:关闭定时器(在这个页面如果有定时器,销毁vue实例的时候,需要主动关闭定时器)有聊天功能关闭聊天室,通过axios.CancelToken.source()方法取消axios请求。 销毁后destroyed() 销毁 Vue 实例之后调用

4.VueX

     是什么:是一个数据管理工具,一个公共数据池。

     作用 :页面与页面之间通讯,可以做到请求一次可以多次调用数据,提高性能。

     有什么:VueX里面有5个核心:store,mutations,action,getter,moduel(每个模块都有自己的state,getter,mutations,action)

               首先要初始化store:仓库,用于读取状态值,里面有:

  1. state:存放数据状态,不可直接改变里面的数据。
  2. mutation:存放普通方法,对state数据的增删改查
  3. Action(放异步方法,对state数据管理):可以理解为通过将mutations里面处理数据的方法变为异步处理数据的方法,简单的来说就是异步操作数据。
  4. getter(相当于计算属性的get):类似vue里面的computed计算属性(只有get方法):根据state数据的改变而改变,场景:购物车的数量和总价(!!!必须有return返回值)

vuex的应用场景:单页面应用,组件志健的状态,音乐播放,登录状态,加入购物车

export default new Vuex.Store({//1.创建仓库store
    //1.state,因为在主页面已经能把Store注入实例,所以在其他页面可以使用this.$store.state获取
    state: {
        count:0
    }

    //2.getters  调用方法:this.$store.getters
    getters:{

    }

    //3.mutations,存放普通方法,对state数据的增删改查,
    //在其他页面调用方法:this.$store.commit('type',payload),type:mautations里面的方法名,payload:传入的参数        mutations: {
            add(state,payload){//这里的state就是this.state,payload传入的参数,只能是一个,但是可以是对象形式传入
                state.count = payload + state.count;
             }
            cut(state,payload) {
                state.count = state.count - payload
            }
        }

   // 4.action,在这里可以定义调用mutations的方法,也可以存放异步代码
    //在其他页面调用方法:this.$store.dispatch('actionName',payload)
        action: {
            addItem(context,payload) {//
                context.commit('add',payload);//调用mutations的add方法,改变state
            }
        
            cutItem('context',payload) {
                context.commit('cut',payload);//调用mutations的cut方法
            }
        }
    
})
复制代码

5.Vue-Router路由

 Vue Router是vue.js官方的一个路由管理器,它可以通过不同的请求路径切换到不同的组件并且进行页面渲染。

      声明式导航   

  • go to foo
  •       编程式导航    this.$router.push({ path:'/home'})

    Vue-Router的使用步骤:

    //1.安装引入
    //2.定义组件
    //3.配置路由表( )
    //4.将路由注入到实例
    //5.设置导航跳转
    //6.设置路由出口
    复制代码

    6.http是一种网络协议,最初的目的是为了发送和接受html页面的一种方法,它规定了一种协议,让浏览器更高效。

    区别:1.安全性、传输方式不同

         http是超文本传输协议,信息是明文方式传输的,如果黑客截取到web浏览器和客户端之间的传输报文,就会直接能够获取到其中的信息。

          https是具有安全性的SSL加密传输协议,为浏览器和服务器之间的通信加密,是一个以安全性为目的的一个网络通道。

    2.端口号不同

    http:40    https:443

    3.收费标准不同

    http:免费   https:收费

    4.连接方式不同

    http:无状态协议

    https:ssl+http协议构建的可进行加密传输,身份认证的网络协议。

    优化包括:性能优化,用户体验优化,搜索引擎优化

    性能优化:合并压缩,服务器压缩,按需引入,图片优化,虚拟DOM,缓存

    7.跨域:所谓同源是指,域名,协议,端口均相同,只要有一个不同,就是跨

    如何解决跨域:

    购物车全选和反选用了什么功能:computed,里面有get和set的方法

    8.ES6新特性:

    1、  let:用来代替 var的关键字,

               1、变量不允许被重复定义 2、不会进行变量声明提升 3、保留块级作用域中i的

    2、const:1、常量值不允许被改变 2、不会进行变量声明提升

    3、解构语法

    4、模板字面量:      ` 你好 我叫{ 你好 }  我叫 {中国} ` 替代   '你好' + 我叫+‘中国’

    5、字面量 :变量名和属性名一样就写一个

    6、for...of 循坏  可以迭代数组,字符串,不可循环对象

    forEach()  只能循环数组

    7、拓展运算符

    8、箭头函数:与普通函数的区别:1、书写上用=>代替了function  2、没有自己的this,因为他没有protpye   3、不能当做构造函数使用,就是不能够new     

    9.HTML5新增:1.语义化标签:

    , ,,...

               2.增强型表单

                3.视频和音频

                   4.地理定位

               5.Web Socket

                6.渐变

    10.CSS3: **属性选择器:****属性选择器,**伪类选择器,

    1.transform 变形     2.transition 过渡   3.animation 动画  4.圆角  5.图片边框,文字阴影和盒阴影

    11.响应式布局:响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局

           1.媒体查询   2.百分比布局   3.rem布局   4.视口单位:vw

     Flex弹性布局,兼容性较差

    Grid网格布局,兼容性较差

    Columns栅格系统,往往需要依赖某个UI库,如Bootstrap

    12.sass:可以嵌套,可以写函数(计算视口单位:vw),定义变量复用,循环

    13.vue $router 路由传参的3种方法
    复制代码

    第一种:使用router的name属性也就是params来传递参数----在url上会消失
    第二种:使用query来传递参数
    第三种:动态路由----使用vue里的标签来传递参数

    分类:
    前端
    标签:
    收藏成功!
    已添加到「」, 点击更改