1.Vue2.0生命周期DOM元件安装在哪个阶段？在组件中el它是否会影响组件的渲染顺序？

问题一：

处理生命周期的几个函数
new Vue 创建vue实例
初始化：生命周期、事件，但代理数据尚未开始。
beforeCreate : 此时：无法通过vm访问到data中得数据,methods方法。
初始化：数据监听和数据代理。
created : 在这一点上：你可以通过。vm访问到data中的数据,methods方法。
此阶段Vue开始解析模板并生成虚拟DOM(内存中)该页尚无法显示分析的内容。
beforeMount : 此时：1.将显示该页面Vue编译的DOM结构，2.所有DOM手术最终没有奏效。
*内存中的虚拟。DOM转为真实DOM插入页面。
mounted : 此时：1.该页面展示了这一体验。Vue编译的DOM。2.对DOM操作是有效的(尽量避免)。此时，初始化过程结束，通常是这样：打开计时器。,发送网络请求、订阅消息、绑定自定义事件等初始化操作。
beforeUpdate
updated
beforeDestroy
destroyed

问题二：
有影响，
有el:第一个问题解释说，这个过程就在那里。el且没有template将呈现该进程mouted；
没有el:只是没说出来vm执行哪个节点，vm迷失了，就会走created别下去，需要打个电话vm.$mount(el)该指定将仅执行mounted；

2.对MVVM理解

## MVVM模型
1.M : 模型（Model）：对应data数据输入； 最终会再次出现vm实例对象，可以直接调用；
2.V : 视图（View） : 模板编码(页面)；
3.VM : 正在尝试模版(ViewModel）: vue实例对象 ；实现页面监控和数据绑定，因此经常使用vm此字段表示vue实例；
## 观察发现：
data中的所有属性，这些属性最终显示在vm身上；
vm身体上的所有属性和。Vue原型上的所有属性，然后vue这两个模板都可以直接使用。

3.简述v-model的作用，v-model和：value不同之处和应用场景。

回答：v-model其实现是双向数据绑定，即：value是显示缺省值，所以当一个input当需要双向数据绑定时v-model，只需直接使用时显示缺省值value

等价于

4.如何侦听data中的数据更改？

## 普通监听

watch:{
    isHot(newVal,oldVal){
        console.log(newVal,oldVal);
    }
}

## 深度监听

watch:{
   isHot:{
       immediate:false, // 默认情况下是否执行监控(页面在加载时执行。)
       deep:true, // a：{b:c:{}}  如果它是多层的，则需要打开它deep
       handler(newVal,oldVal){
          console.log(newVal,oldVal);
      }
   }
}

## computed(计算属性)监听

computed:{
    fullName:{
        get(){
            return ${this.firstName}-${this.lastName}
        },
        set(value){
            let arr        = value.split(-)
            this.firstName = arr[0]
            this.lastName  = arr[1]
        }
    }
 }

5.描述vue如何使用已计算的特性？

## 只获取速记，不做任何修改。

 fullName(){
      return ${this.firstName}-${this.lastName}
 }

## 需要完全编写才能再次获取和修改它。
get ：1.第一次读取数据时，调用；2.当它所依赖的数据发生变化时；

computed:{
    fullName:{
        get(){
            return ${this.firstName}-${this.lastName}
        },
        set(value){
            let arr        = value.split(-)
            this.firstName = arr[0]
            this.lastName  = arr[1]
        }
    }
 }

6.vue计算属性和侦听方法之间的区别是什么？在什么情况下使用计算属性？什么时候使用听音方法？

答：
wacth:监听date数据输入、
computed 计算属性不是必需的，也不能再是data声明，你可以认为。data使用相同的；
1.computed可以完成的功能watch它一定会完工；
2.watch可以完成的功能，computed这可能是不可能的，例如：watch可以异步处理(计时器)
注意：computed当它能够实现时，它就被使用了。computed ，couputed无法实施watch；

7.class动态绑定分别是对象语法和数组语法。请缩写另一个语法代码段？这两种语法可以一起应用吗？

1.字符串类型：data有一处房产叫classA：‘normal’,将被聚合到一个class适用于样式的名称不确定，需要动态绑定；

class = a  :class=classA

2.数组类型：data有一处房产叫arr的数组[‘atgu1’,‘atgu2’,‘atgu3’],待装订的款式数量不确定，名称不确定；

class = a  :class=arr

3.对象类型：data有一处房产叫classObj的对象{obj1:false,obj2:true},确定要绑定的样式的数量，并确定名称。,但是，有必要使用动态控制；

class=a :class=classObj

4.可以同时应用数组和对象。

class="[{ active: isActive }, errorClass]"

8.简述vue2.0中v-if 和v-show频繁切换(tab)用这种方式？这两者对页面性能有什么影响？

答：1.v-if 适用于切换频率较低且不显示的场景。DOM被直接移除；v-show适用于切换频率较高且不显示的场景。DOM隐藏的且未移除的；使用v-if当元素可能不可用时，请使用v-show元素必须可用；

2.开关频率越高。v-show；

3.频繁想vm插入Clear节点，自然不是。v-show隐藏的善；
4.v-show第一次呈现页面时，它对页面性能有很大影响，因为需要同时呈现。DOM内容渲染; v-if仅当第一次呈现页面时true部分DOM，因此对页面性能的影响很小；

9.在vue2.0中v-if和v-for使用相同标签时，谁具有更高的优先级？

答：for 优先级较高，先遍历，再根据遍历条件进行判断if；(最好不要连用)组合computed 遍历出来 如果符合条件，请再次使用。v-for遍历；

10.在vue2.0在遵循以下代码时，用户输入用户名并切换tab会造成input残差，如果您实现切换以再次呈现表单？

答：翻译过来就是每次切换后这两个表怎么都是空的。有很多种方法。 指定key 就会清空

切换两个值

11.请检查以下事项vue代码中的问题：

    
{{index}}

正常写作：因为10遍历后是12345678910，见上图index应该是1-9，将不会有重复数据，设置key不会有冲突，所以直接使用一个。item密码是可以解开的key不一致的问题，具体分析，根据目前的结构，不要用index是最明智的；

    
{{ item-1 }}

12.父组件如何将参数传递给子组件？

方法1，所有收到的不指定类型，不会有错误提示；

props:[name,age]

方法2，LIFE收到的参数类型，会上报错误提示；

props:{
    name:String,
    age:Number
}

方法3，LIFE收到的参数类型，会上报错误提示；

props:{
    name:{
        type:String,// 类型
        required:true, // 必须
    }
    age:{
        default:14, // 默认
        type:Number
    }
}

注意：请勿尝试修改props中的值；

13.如何监听子组件中的事件更改？

方法一 父组件将函数类型传递给子组件。props为了实现，父组件监听子组件事件中的更改。
父组件：

//  在methods在在在方法中定义的的的getName方法监听子组件中的更改val 是从子组件传递的值
methods:{
    getName(val){
        console.log(val)  // 输出：张三
    }
}

子组件：

props:[getName] , // 接收父组件传递的参数

// 例如，有一个Click事件
methods:{
    sendName(){
        this.getName(张三)
    }
}

方法二 用于实现父组件侦听子组件的自定义事件 v-bind： @
父组件：

//  在methods在在在方法中定义的的的getName该方法监听是否触发子组件。methodName自定义事件；
methods:{
    getName(val){
        console.log(val)  // 出品：李思
    }
}

子组件：

// 例如，有一个Click事件触发父组件的方法
methods:{
    sendName(){
        this.$emit(methodName,李四)
    }
}

方法三 子组件的ref子组件的事件监视事件更改
父组件：

//  在methods在在在方法中定义的的的getName该方法监听是否触发子组件。methodName自定义事件；
mounted(){
    this.$refs.child.$on(methodName,this.getName)
    this.$refs.child.$on(methodName,(val)=>{
        console.log(val)
    })  // 不要使用此方法methods中的getName方法了；
}，
methods:{
    getName(val){
        console.log(val)  // 出品：李思
    }
}

子组件：

// 例如，有一个Click事件触发父组件的方法
methods:{
    sendName(){
        this.$emit(methodName,李四)
    }
}

方法四 全局事件总线，比监听父组件，任何组件都绝对可以监听。

方法五 消息订阅和发布

14.组件插槽的应用，子组件如何与父组件通信？

1.默认插槽
如果子组件,父调入组件的子组件的开始和结束标签之间的内容将显示子组件。slot中，
如果未定义子组件slot，则不显示父调入组件的子组件的起止标签之间的内容；

2.具名插槽
使用子组件中的名称声明插槽

在调用父组件的地方使用。v-slot：header或者 #header

3.插槽作用域，插槽prop由父组件定义的子组件希望使用从子组件接收的参数。
在父零部件中：default以与该子组件相对应。user始终如一地记住；

在子组件中，:user以父组件为基础。v-slot:user一致

摘要：在上面的代码中v-bind 可换成：
在上面的代码中v-slot可换成#

15.简述VueRouter功能。(SPA应用-单页应用程序)

理解 ：是vue专门设计的插件库，用于实现SPA单页应用程序。
需要 npm i vue-router

SPA了解应用程序？
1.单页 web 应用（single page web application,SPA）。
2.整个应用程序只有一个完整的页面。
3.点击页面中的导航链接不会刷新页面，只会进行部分页面更新。
4.需要传递数据。ajax请求获取。

什么是路由？
1.一条路径是一组映射管理(key-value）
2.key为路径，value可能是fuc或component
前端路由：value是个component，用于显示页面的内容。当路由器的路径更改时，将显示相应的组件。

小结：布线，根据您的路径，我决定显示哪个组件；

## 使用：
第1步：npm i vue-router
第2步：在main.js中引入并use vue-router(绿色方框)，编号3步骤定义的路线介绍(红框)

第3步骤：创建router-》index.js 下图是汇编而成的router配置项的。

第4步骤：使用路由
// 1.实现路由切换

About

// 2.指定组件的呈现位置

About

注：交换路由组件，原有的路由组件被破坏；

16.VueRouter监控页面跳转路径变化的方法是什么？

全局路由守卫
router.beforeEach：前方路线守卫 收到参数 to,from ,next；
router.afterEach：发布路径守卫 收到参数 to,from ；
组件路由守卫
beforeRouteEnter：通过路由规则输入组件，接收参数，to,from,next
beforeRouteUpdate：通过布线规则更新组件，接收参数，to,from,next
beforeRouteLeave：按布线规则离开组件，接收参数，to,from,next
专属线路守卫 只有前部，没有后部
beforeEnter:仅监控SET组件并接收参数，to,from,next
watch 监听

watch:{
  $route(to,from){
    console.log(to.path);
  }
},

17.vueRouter有多少种方法可以跳转页面？

第一种跳转方法：
// 实现路由切换

About

// 指定组件的呈现位置

注：如果是跳跃次要路线 to当谈到把父亲的二年级带出来的时候；

二次跳跃模式编程

this.$router.push(name:Hello,paramas:{name:zhagnsan})

18.请阅读代码中的问题，并简要描述以下代码实现的功能

const router =  new VueRouter({...})
router.beforeEach(()=>{
    next()
})
router.afterEach(()=>{
    next()
})

回答：1.beforeEach前线守卫已经3个参数，to，from，next
afterEach后方的道路守卫已经2个参数，to，from，没有next
2.全局前向路由守卫：可以取消在每次路由切换之前执行的初始化执行to中的meta:{auth:true}执行是否需要登录
写法 ，用to.meta.auth您可以判断是跳转到登录页面还是直接跳转到该位置的指定页面；
3.全局后方路线守卫：每次路线切换后执行。POST-ROUTING通常用于设置页面标题，可以在跳转成功后进行设置。title；

const router =  new VueRouter({...})
router.beforeEach((to, from, next) => {
   console.log(to,from)
   next() // 释放意味着跳跃
})
router.afterEach((to, from) => {
    console.log(to,from)
})

19.简要描述了三种拦截器在组件路由守卫中的作用和区别；

通过工艺路线规则输入组件：实例不通过工艺路线规则。import一个组件；

区别：进入、更新、离开；
功能：通过路由规则调用组件，调用更新组件，组件离开组件后调用；

// 通过路由规则，输入组件被调用。
beforeRouteEnter(to,from,next){
    console.log(to,from,next)
}
// 通过路由规则，更新组件被调用。
beforeRouteUpdate(to,from,next){
    console.log(to,from,next)
}
// 通过发送规则，就会调用离开组件。
beforeRouteLeave(to,from,next){
    console.log(to,from)
}

20.网站url地址为『https://yuzhankeji.com/“，阅读以下代码并编写完整的性能：

const router = new VueRouter({
    routers: [{
        path: “/”,
        component: ()=> import(“@/pages/index/index”)
        alias: “/Index”
    }]
})

回答：http://yuzhankeji.com/Index

21.路由有多少种模式？简要描述一下不同传播方式之间的区别？

回答：router-link 和 规划工艺路线

router-link 第1种 跳跃路线和搬运query参数
to字符串已写入。

/about?name=${item.name}&age=${item.age} active-class=action>About // 传参

to该对象已写入。

About // 传参

to的对象name跳转

About // 传参

mounted(){this.$route.query }    // 接收参数

router-link 第2种 跳跃路线和搬运params参数

需要在js中配置

path：detail/:id:name

to字符串已写入。

/about/${item.name}/${item.age} active-class=action>About // 传参

to的对象name跳转

About // 传参

mounted(){this.$route.params}    // 接收参数

摘要：特别说明：路线运输params参数，例如使用to不能使用对象写入方法。path配置项，必须使用name配置！

router-link 第3种 路由的props 配置

规划工艺路线传参

this.$router.push(name:Add,params:{age:1})  // 跳跃可以返回
this.$router.replace(name:Add,params:{age:1})  // 跳转不能退还
this.$router.back()  // 返回
this.$router.forward()  // 前进
this.$router.go()  // +向前数，-数后退

//路由缓存：路由保持挂载，不销毁；Message是组件名称；

   
// 使用keep-alive 将触发以下两个方法，随后methods同级；
activated(){}
deactivated(){}

22.当当前路由更改但组件被重复调用时，使用什么方法来监听路由更改？

区别：进入、更新、离开；
功能：通过路由规则调用组件，调用更新组件，组件离开组件后调用；

// 通过路由规则，输入组件被调用。
beforeRouteEnter(to,from,next){
    console.log(to,from,next)
}
// 通过路由规则，更新组件被调用。
beforeRouteUpdate(to,from,next){
    console.log(to,from,next)
}
// 通过发送规则，就会调用离开组件。
beforeRouteLeave(to,from,next){
    console.log(to,from)
}

23.简述VueX。

集中的状态(数据)管理。vue插件。
多个组件依赖于统一状态。-共享

24.简述Vuex中state，actions，getters，mutations的作用。

搭建vuex环境
1.安装 npm i vuex

2. 引入store;
   import store from ‘您的存储路径’
   在new 中 写store使用store;
   

创建store两种方式
src下创建store文件夹,新增一个index.js文件
编写index.js文件 创建三个对象，它们是actions ,mutations,state

// 引入vuex
import Vue from vue
import Vuex from vuex

Vue.use(Vuex)
// 准备actions中的方法context一个value - 用于响应组件中的操作(等待程序);
// 调入组件actions  this.$store.dispatch(add,2)
const actions = {
    add(context,value){
        context.commit(ADD,value)
    }
}
// 准备mutations中的方法state一个value - 对于运行数据(state)（厨师）;
// 调入组件mutations   this.$store.commit(ADD,2)
const mutations = {
    ADD(state,value){
        state.sum += value
    }
}
// 准备state - 用于存储数据;
// 调入组件state的值 ，this.$store.state.sum
const state= {
    sum:0
}
// 准备getters - 用于将state中的数据;有点像计算属性可以处理state中的值;
// 调入组件getters中的值 this.$store.getters.bigSum方法名
const getters = {
    bigSum(state){
        return state.sum * 10
    }
}
//创建和公开store
export default  new Vuex.Store({
    actions,
    mutations,
    state,
    getters 
})

方法1.在组件中使用store，需要actions
第一步.需要异步处理或需要判断等需要调用。actions，在调入组件actions中名称为add的方法，

this.$store.dispatch(add,3)

步骤2.输入store.js的actions在使用时，应该有add此方法接收两个参数之一。context为整个store对象，则为value需要调用传递的值。mutations中的ADD方法

add(context,value){
    context.commit(ADD,value)
}

第三步，在mutations中创建的方法接受参数。state 一个value

ADD(state,value){
    state.sum += value
}

方法2，不需要拨打actions,在组件中直接调用；

this.$store.commit(ADD,3)

---

组件中的缩写store中的state和actions和mutations和getters

---

import { mapState ,mapGetters,mapMutations,mapActions} from ‘vuex’
在computed中

...mapState({he:‘sum’,scl:‘school’,sub:‘subject’})  //object写法
...mapState([‘sum’,‘school’,‘subject’])  //数组写法
...mapGetters({bigSum:‘bigSum’})  //object写法
...mapGetters([‘bigSum’])  //数组写法

在methods

@click = add(3) // 必须传递参数。
...mapMutations({add:ADD}) // object
@click = ADD(3) // 必须传递参数。
...mapMutations([ADD])  // 数组写入。

@click = add(3) // 必须传递参数。
...mapActions({add:add}) // object
@click = add(3) // 必须传递参数。
...mapActions([add])  // 数组写入。

---

注意：包装注意事项
1.namespaced:true
2.在模块化之后，应该使用它 ：

3.指定名称；

4.如果用的commit请注意，方法请求应写在下图中

最后，学生和号码分别放在不同的文件夹中，便于管理。
新建js

在store中引入 这个名称是由它自己定义的。只是随随便便地定义它，并保持它的一致性；

---

总而言之：
1.在调入组件store中的state $store.state.sum;

2.调用store中actions this.$store.dispatch(‘add’,2) ;

3.调用store中的mutations this.$store.commit(‘ADD’,2);

4.actions中的add方法接受两个参数，第一个参数是整个context，第二个是传递的值value，context必须在以下位置执行mutations中的方法 context.commit(‘ADD’,value)

5.state全局公共状态中存储的内容；

6.getter与计算属性类似的方法有一个参数。state中的对象return，GET方法$store.getter.方法名。

25.简述Vuex中state.commit()用法。

回答：有两个地方需要他，
1.组件中.this.$store.commit (‘ADD’,2)
2.actions中使用 context.commit(‘ADD’,2)

26.阅读以下代码:

(1.)简要描述代码实现的功能？多个组件共享相同的状态
(2.) 描述页面temp2.vue是否将最终输出结果归档？

**vmVue.js文件**
import Vue from vue
export default new Vue()

**Temp-1.vue文件**



**Temp-2.vue文件**