建设投注网站百度seo插件
vue2生命周期
系统自带:beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed
2.一旦进入到页面或者组件,会执行哪些生命周期,顺序。
beforeCreate
created
beforeMount
mounted
3.在哪个阶段有$el,在哪个阶段有$databeforeCreate啥也没有created有data没有elbeforeMount有data没有elmounted都有
4.如果加入了keep-alive会多俩个生命周期
activated、deactivated
5.如果加入了keep-alive,第一次进入组件会执行哪些生命?
beforeCreate
created
beforeMount
mounted
activated
6.如果加入了keep-alive,第二次或者第n次进入组件会执行哪些生命周期?
只执行一个生命周期:activated
谈谈你对keep-alive的了解
1.是什么
vue系统自带的一个组件,功能:是来缓存组件的。===》提升性能
2.使用场景
就是来缓存组件,提升项目的性能。具体实现比如:首页进入到详情页,如果用户在首页每次点击都是相同的,那么详情页就没必要请求N次了,直接缓
存起来就可以了,当然如果点击的不是同一个,那么就直接请求。
v-if 和 v-show的区别
1.展示形式不同
v-if是创建一个dom节点
v-show 是display:none、block
2.使用场景不同
初次加载v-if要比v-show好,页面不会做加载盒子
频繁切换v-show要比v-if好,创建和删除的开销太大了,显示和隐藏开销较小
v-if和v-for优先级
v-for的优先级要比v-if高
***是在源码中体现的:function genElement
ref是什么
来获取dom的
<template><div class="home"><imgref='imgs'src="../assets/logo.png" id='img'/></div>
</template>
<script>
export defaultname: "Home",mounted(){console.log( document.getElementById('img'));console.log(·this.$refs.imgs·)
</script>
nextTick是什么?
获取更新后的dom内容
scoped原理
1.作用:让样式在本组件中生效,不影响其他组件。
2.原理:给节点新增自定义属性,然后css根据属性选择器添加样式。
一 、让css只在当前组件生效<style scoped>二、 scss、 stylus
scss:1.下载npm installsass-loader node-sass--save2.<style lang='scss' scoped>3.scss 样式穿透父元素/deep/子元素
stylus:下载npm install styluss stylus-loader--save2<style lang='stylus' scoped>3. stulus 样式穿透父元素>>>子元素
父子组件传值、兄弟组件传值
子组件
1.父组件传值父组件:<Header :msg='msg'></Header>子组件:props:['msg']props:{msg:数据类型}
2.子组件 传值父组件子组件:this.$emit("自定义事件名称",要传的数据);父组件:<Header @childInput='getVal'></Header>methods:{getVal(msg) {/ /msg就是,子组件传递的数据}
3.兄弟组件之间的传值(bus)
通过一个中转
A兄弟传值:import bus from '@/common/busbus.$emit("toFooter",this.msg) ;
B兄弟接收:import bus from '@/common/bus'bus.$on('toFooter',(data)=>{this.str=data;})
面试题:computed、methods、watch有什么区别?
1. computed vs methods区别computed是有缓存的methods没有缓存
2.computedvswatch区别watch是监听,数据或者路由发生了改变才可以响应(执行)computed计算某一个属性的改变,如果某一个值改变了,计算属性会监听到进行返回watch是当前监听到数据改变了,才会执行内部代码
面试题:props和data优先级谁高?
props ===> methods ===> data ===> computed ===>watch
面试题:Vuex有哪些属性?
state、getters、mutations、actions、modules
state类似于组件中data,存放数据
getters类型于组件中computed
mutations类似于组件中methods
actions提交mutations的
modules把以上4个属性再细分,让项目更好管理
面试题:Vuex中的mutaitons和actions区别
mutaitons 都是同步事物
actions 可以包含任意异步操作***在调试中就看出来
面试题:Vuex是单向数据流还是双向数据流?
Vuex是单向数据流
面试题:Vuex如何做持久化存储
Vuex本身不是持久化存储
1.使用localstorage自己写
2. 使用vuex-persist插件
vue 设置代理
module.exports = {devServer:·{proxy:·'http://localhost:3000}
}
打包路径和路由模式
路由模式 :history
前端如果自己测试项目,hash
项目上线要求是 history 模式, 该怎么办?重定向
module.exports = {publicPath:'./
}
代理和环境变量
vue-cli
面试题:Vue路由模式
路由模式有俩种:history、hash
区别:
1.表现形态不同history:http://localhost:8080/abouthash:http://1oca1host:8080/#/about
2.跳转请求history : http://localhost:8080/id ===>发送请求hash不会发送请求
3。打包后前端自测要使用hash,如果使用history会出现空白页
面试题:介绍一下SPA以及SPA有什么缺点
SPA是什么?单页面应用
缺点:1.SEO优化不好2.性能不是特别好
面试题:Vue路径传值
1.显式http://localhost:8080/about?a=11.1 传:this.$router.push({path:'/about',query:{a:1}})1.2 接:this.$route.query.a
2.隐式http://1oca1host:8080/about2.1 传:this.$router.push({name:'About'params:{a:1}})2.2 接: this.$route.params.a
面试题:双向绑定原理
通过Object.defineProperty劫持数据发生的改变,如果数据发生改变了(在set中进行赋值的),触发update方法
进行更新节点内容(str}),从而实现了数据双向绑定的原理。
路由导航守卫有哪些
全局、路由独享、组件
1.全局beforeEach、beforeResolve、afterEach
2.路由独享beforeEnterl
3。 组件内beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
面试题:Vue动态路由
场景:详情页(文章、商品)
谈一下MVVM框架
web1.0时代文件全在一起,也就是前端和后端的代码全在一起问题:1、前端和后端都是一个人开发。(技术没有侧重点或者责任不够细分)2、项目不好维护。3、html、CSS、js页面的静态内容没有,后端是没办法工作的(没办法套数据)。mVc..都是后端先出的
web2.0时代ajax出现了,就可以:前端和后端数据分离了。解决问题:后端不用等前端页面弄完没,后端做后端的事情(写接口)、前端布局、特效、发送请求。问题:1、html、cSS、js都在一个页面中,单个页面可能内容也是比较多的(也会出现不好维护的情况)。
出现前端的框架了MVC、MVVM解决问题:可以把一个"特别大"页面,进行拆分(组件化),单个组件进行维护
什么是MVVMModel-View-ViewModel的简写
view:视图【dom==》在页面中展示的内容】
model:模型【数据层:vue中的data数据】
viewModel:视图模型层【就是vue源码】