Vue笔记

生命周期

生命周期是什么

Vue从开始创建，初始化数据，编译模板，挂载DOM，渲染更新，渲染卸载的过程，称为Vue的生命周期

各个生命周期的作用

• beforeCreate：组件创建开始，组件属性生效前。【data和methods的数据没有初始化】
• created：组件实例已创建，【data和methods已经初始化成功】，$element不可用。
  最早调用methods和data需要在created里操作
• beforeMount：模板已经编译完成，但是还没渲染到页面，【页面元素还没被替换】
• mounted：实例完全创建，【模板已经渲染到页面】，最早需要在mounted里操作页面节点
• beforeUpdate：data已经是更新过的数据，但是页面还没渲染成功，没有跟新数据保持同步
• updated：页面和data已经同步
• beforeDestroy：进入销毁阶段，【data，methods，过滤器可用】
• destroyed：组件已全部销毁

router路由模式

• hash：使用URL操作路由，支持所有浏览器
• history：依赖HTML5 History API和服务器配置
• abstract：支持所有JavaScript运行环境，例如Node.js。浏览器没有API会强制进入此模式

路由实现原理

• hash：基于location.hash实现，每次访问浏览器都会增加一个历史记录，可以通过a标签改变URL的hash值
• history：提供History API实现URL变化：history.pushState和history.replaceState。在不刷新的情况下操作浏览器的历史记录。pushState【新增历史记录】，replaceState【直接替换当前历史记录】

路由实操

1. npm install vue-router -g安装vue-router
2. 创建page1.vue和page2.vue，在index.js中引入两个组件

import page1  from './page1.vue'
import page2  from './page1.vue'

//定义routes路由的集合
const routes=[
    //单个路由均为对象类型，path代表路径，component代表组件
    {path:'/page1',component:page1},
    {path:"/page2",component:page2}
]

//实例化Router
const router=new Router({
//ES6简写，等于routes：routes
    routes
});

//抛出实例对象，方便外部读取
export default router

3. 在main.js引用router.js

import Vue from 'vue'
import App from './App'
//引用router.js
import router from './router.js'
Vue.config.productionTip = false

new Vue({
  el: '#app',
//注入到vue的实例对象上
  router,
  components: { App },
  template: '<App/>'
})

4. 在App.vue内添加

Vue的三种跳转方式

• 直接跳转：to里写明跳转路径

<router-link to=‘/student’></router-link>

• 动态跳转：

<router-link :to="{name:'team',params:{userId:123}}"></router-link>

• js跳转：

<button @click="router"></button>
js：
methods {
	router(){
		this.$router.push('/student',this.student)
		this.$router.push('/student',{ 
			params:{id: result.studId}
		})
	}
}

• 带参数跳转

 <router-link :to="{path: '/page2', params: {name: '小红'}}">跳转</router-link>

 //page2.vue
 this.name=this.$route.params.name

插槽slot

插槽：slot为组件提供了对外的接口，允许从组件外部传递内容，并将这部分内容放到指定位置
当两次

注意：当一个组件可能被使用至少两次并且两次使用内容不同时，插槽才有存在的必要

具名插槽：给组件的每个填充区域都取个名字，使用时往对应名字的区域填充内容

作用域插槽：【获取数据子组件的属性】父级模板里的所有内容都是在父级作用域中编译的，子模板里的所有内容都是在子作用域中编译的。父级组件不能访问子级组件的作用域。绑定子组件属性到插槽中允许父级组件访问

render：插槽会编译为render函数，render构建虚拟DOM（Virtual DOM）

render就是slot插槽的本质