前端记录(vue篇)

1. vue路由传参：

//1.使用query方式传参，(路径会显示传递的参数，刷新页面数据不会丢失)
	//HTML的方式
	<router-link :to="{name:xxx,query:{id:123456,name:789}}"></router-link>
	//JS的方式
	export default {
	  methods: {
	    routerTo() {
	      this.$router.push({
	        name: `xxx`,
	        query: {
	          id: '123456', name: '789'
	        }
	      })
	    }
	  }
	}
	//接收参数
	this.$route.query.id
	this.$route.query.name
//2.使用params方式传参，(路径不会显示传递的参数，刷新页面参数会丢失)
	//HTML的方式
	<router-link :to="{name:xxx,params:{id:123456,name:789}}"></router-link>
	//JS的方式
	export default {
	  methods: {
	    routerTo() {
	      this.$router.push({
	        name: `xxx`,
	        params: {
	          id: '123456', name: '789'
	        }
	      })
	    }
	  }
	}
	//接收参数
	this.$route.params.id
	this.$route.params.name
//3.方法三
	//在路由中配置
	{
		path: '/about/:id',
		name: 'About',
		component: About
   }
   //跳转页面
	this.$router.push({
		path: `/about/${id}`,
	})
	//接收参数
	this.$route.params.id

2. vue父子组件传参：

父转子：prop
export default {
  props: {
    title: {
      type: String,
      default: 'hello world'
    }
  }
}

子转父：
<!-- 父组件 -->
<template>
    <div class="test">
      <test-com @childFn="parentFn"></test-com>
      <br/> 
      子组件传来的值 : {{message}}
    </div>
</template>

<script>
export default {
    // ...
    data: {
        message: ''
    },
    methods: {
       parentFn(payload) {
        this.message = payload;
      }
    }
}
</script>

<!-- 子组件 -->
<template> 
<div class="testCom">
    <input type="text" v-model="message" />
    <button @click="click">Send</button>
</div>
</template>
<script>
export default {
    // ...
    data() {
        return {
          // 默认
          message: '我是来自子组件的消息'
        }
    },
    methods: {
      click() {
            this.$emit('childFn', this.message);
        }
    }    
}
</script>

3. vue的生命周期：

1.beforeCreate（创建前） 在数据观测和初始化事件还未开始
2.created（创建后） 完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来
3.beforeMount（载入前） 在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
4.mounted（载入后） 在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
5.beforeUpdate（更新前） 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
6.updated（更新后） 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
7.beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。
8.destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
9.activated（激活时）被 keep-alive 缓存的组件激活时调用。该钩子在服务器端渲染期间不被调用。
10.deactivated（停用时）被 keep-alive 缓存的组件停用时调用。该钩子在服务器端渲染期间不被调用。

注释：
1.DOM 渲染在 mounted 中就已经完成了。
2.第一次页面加载会触发 beforeCreate, created, beforeMount, mounted

4. vue路由的钩子函数：

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

beforeEach主要有3个参数to，from，next：

to：route即将进入的目标路由对象，

from：route当前导航正要离开的路由

next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

5. vue父子组件的渲染顺序：

一、渲染过程
父beforeCreate-->父created-->父beforeMounte-->子beforeCreate-->子created-->子beforeMounte-->子mounted-->父mounted

二、子组件更新过程：
1.影响到父组件：父beforeUpdate-->子beforeUpdate-->子updated-->父updated
2.不影响父组件：子beforeUpdate-->子updated

三、父组件更新过程：
1.影响到子组件：父beforeUpdate-->子beforeUpdate-->子updated-->父updated
2.不影响子组件：父beforeUpdate-->父updated

四、销毁过程
父beforeDestroy-->子beforeDestroy-->子destroyed-->父destroyed

6. vue常用的修饰符：

修饰符
.lazy：光标离开input输入框的时候值才会改变
.number：将输出字符串转为Number类型，但是如果输入字符串，输出的是string
.trim：自动去掉输入的首尾空格
事件修饰符
.prevent: 提交事件不再重载页面；
.stop: 阻止单击事件冒泡；
.self: 当事件发生在该元素本身而不是子元素的时候会触发；
.capture: 事件侦听，事件发生的时候会调用

7. vue中 key 值的作用：

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

8. vue等单页面应用及其优缺点：

优点：Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。
缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。

9. vue.js的两个核心是什么：

数据驱动、组件系统

10. v-if 和 v-show 区别：

		相同点：
			两者都是在判断DOM节点是否要显示。
		不同点：
			1、实现方式
				v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点
				v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。
			2.编译过程
				v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件； 
				v-show只是简单的基于css切换；
			3.编译条件
				v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译；
				v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素始终被保留； 
			4.性能消耗
				v-if有更高的切换消耗，不适合做频繁的切换；
				v-show有更高的初始渲染消耗，适合做频繁的额切换；

11.route 和router的区别：

$route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。
$router对象是全局路由的实例，是router构造方法的实例。

12.访问根实例、父组件、子组件：

vue官网：处理边界情况
https://cn.vuejs.org/v2/guide/components-edge-cases.html