一、关于vue2的生命周期函数
1.1 生命周期函数
| 函数 | 描述 |
|---|---|
| beforeCreate | 组件实例被创建之前 |
| create | 组件实例已经完全创建 |
| beforeMount | 组件挂载之前 |
| mounted | 组件挂载到实例之后 |
| beforeUpdate | 组件数据发生变化,更新之前 |
| updated | 组件数据更新之后 |
| beforedestory | 组件实例销毁之前 |
| destoryed | 组件实例销毁之后 |
| activated | keep-alive 缓存组件激活时调用 |
| deactivated | keep-alive 缓存的组件停用时调用 |
| errorCaptured | 捕获一个来自子孙组件的错误时被调用 |
| dom 以及 data 什么时候出现 console.log(this. e l , t h i s . el,this. el,this.data) | |
| 子组件和父组件生命周期函数出现时期 |
1.2 问题
1.如何在created中获取dom
答:只需异步操作即可 setTimeout,this.$nextTick(()=>{}),
Promise()
2.为什么发送请求不在beforeCreate里?beforeCreate和created有什么区别?
答:如果请求是在methods封装好了,在beforeCreate调用的时候, beforeCreate阶段是拿不到methods里的方法的(会报错)
3.发送请求是在created里还是mounted里
答：具体要看项目和业务的情况:因为组件的加载顺序是:父组件引入了子组 件,那么先执行父的前3个生命周期,再执行子的前4个生命周期,那么如果我 们的业务是父组件引入子组件,那么在父组件中当前的请求要放在mounted中， 如果当前组件没有依赖关系那么放在created或者mouted生命周期请求都 是可以的。
5.keep-alive的作用:
答:如果当前组件加入了keep-alive 第二次或者第N次加入组件只会执行 activated函数
6.说一说你在项目中最常用的生命周期函数。
created:单组件请求 mounted:同步可以获取dom吗，如果先子组件请求后父组件请求 activated:判断id是否相等,如果不同发起请求 destoryed:关闭视频记录播放历史初始化的时候从上一次的的历史开始播放
二、关于组件
2.1组件的通信方式
父传子:
1.给子组件绑定属性的方式 ，子组件通过props来接收。
这种方式父传子很方便，但是父穿给孙组件就很麻烦了(父->子 子->孙)
这种方式子组件不能直接修改父组件的数据
2.通过this.$parent.xxx使用父组件的数据,可以直接修改父组件的数据
3.依赖注入:父组件可以直接想后代的任一组件传参 ,不用一级一级传递 兄弟之间不行
父:
provide(){
return{
val1:"这是依赖内容"
}
后代:
inject['val1']
子传父：
1.emit
子组件:定义自定义事件:this.$emit('事件名',参数)
父组件:给子组件绑定属性 @事件名="方法"
2.ref
给子组件绑定ref属性 ref='名称'
平辈之间的传值:通过bus.js中转来做
urilts/bus.js
import Vue from 'vue'
export default new Vue()
其他组件引入bus
通过bus.$emit('事件名',参数)和bus.$on('事件名',参数)来传值
2.2如何找到跟组件
this.$parent:找到当前组件的父组件,找不到返回自身 this.$root:找到根组件
2.3 slot
1.匿名插槽 2.具名插槽简写: 3.作用域插槽(用来传值) 传: 把要传递的值绑定给 接: 具名插槽: 匿名插槽: #是v-slot的缩写
2.4组件的封装
组件一定要难点 ,涉及的知识点:slot ,组件通信
三、关于vuex
一、访问state中的属性（存放全局共享的属性）
1.this.$store.state.xxx
2.import {mapState} from 'vuex'
computed:{
...mapState(['str'])
}
区别:第一种可以直接修改state 辅助函数mapState 不能
二、访问gatters中的属性（存放计算属性）
1.this.$getters.str
2.computed:{
...mapGetters(['str'])
}
三、mutations（存放同步方法的）
四、actions （存放异步方法 提交mutations）
返回Promise 可以执行异步操
五、modules（把vuex再次进行模块之间的划分）
二、vuex的持久化存储
1.使用插件
yarn add vuex-persistedstate
npm install --save vuex-persistedstate
2.配置
@/store/index.js
import createPersistedState from 'vuex-persistedstate'
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {},
mutations: {},
actions: {},
plugins: [
createPersistedState({
storage: window.sessionStorage,
key: 'store',
render(state) {
return { ...state }
},
}),
],
})
export default store
四、关于路由
路由模式: history , hash 区别: 1.关于找不到当前页码发送请求的问题: history会给后端发送一次请求 造成服务器的压力 hash不会 2.关于项目打包前端自测问题 hash是可以看到内容的而history是不行的 3.关于表象不同 url中hash是有#，history无
路由故障:当前页跳当前页 官方解决方法:https://router.vuejs.org/zh/guide/advanced/navigation-failures.html
$router和$route的区别: $router包含当前路由和整个路由的属性和方法 $route包含当前路由对象
路由守卫：三个参数 (to,from,next) 1.全局守卫 beforEach 路由进入之前 afterEach 路由进入之后 2.路由独享守卫（√） brforeEnter 路由进入之前 3.组件内守卫 beforeRouterEnter 路由进入之前 beforeRouterUpdate 路由更新之前 beforeRouterLeave 路由离开之前
五、关于API
$set this.$set(target,key,'修改后的值') 响应式 $nextTick :异步操作 $refs :来获取domde $el ::获取当前组件的根节点的 $data: 获取当前组件的数据的 $children :获取当前组件的所有子组件的 $parent 获取当前组件的父组件 如果没有则返回自身 $root 根组件
data数据定义: return 内和外的区别： return内的数据是可以修改的 return外的数据是不能修改的
computed的两种写法:
写法一:
computed:{
str(){
return xxx
}
}
写法二:
computed:{
get(){
return xxx
}
set(val){
this.str=val
}
}
区别:写法二是可以修改计算属性的
写法1:
watch:{
str(newVal,oldVal){
console.log(newVal,oldVal)
}
}
写法2(立即执行)
watch:{
str:{
handler(newVal,oldVal){
console.log(newVal,oldVal)
},
immediate:true //初始化时立即执行
}
}
写法3(深度监听):
obj:{
handler(newVal,oldVal){
console.log('obj',newVal,oldVal)
}
deep:true //开启深度监听
}
computed和methods的区别 computed是有缓存机制的methods是没有缓存机制的,调用几次执行几次
六、关于指令
1.注册指令
全局:
main.js
import Vue from 'vue'
Vue.directive('focus',{ //focus是指令名 v-focus
inserted(el){ //el是挂载的元素
el.focus()
操作...
}
})
局部:
组件中
directive:{
focus:{
inserted(el){
el.focus()}
}
}
2.数据绑定
双向:v-model 单向:v-bind: 简写:
3.v-if和v-for的优先级
vue3中:v-if>v-for vue2中:v-for>v-if
7.关于原理
7.1 $nextTick原理
$nextTick功能:获取更新后的dom
$nextTick(callback){
return Promise.esolve().then(()=>{
callback()
}
}
八、关于源码
8.1. 关于数据解析
2.
8.2 关于生命周期
8.3 关于事件
九、Vue2和Vue3的区别
9.1 Vue2和Vue3双向绑定的方法不同
1. Vue2和Vue3双向绑定 方法不同 2. Vue2:Objext.defineProperty() 3. 后期添加的属性是劫持不到的 4. Vue3: new Proxy() 即使后添加的也可以劫持到 5. 了解Objec t.defineProperty()和Proxy()的写法 6. this.$set在vue3中没有 ，因为Proxy不需要 7. v-if和v-for的优先级不同了 8. $ref和$children也不同 9. Vue2是选项式API Vue3可以向下兼容选项式也可以用组合式 10.Vue3 hooks hooks(就是函数式)，主要让功能模块细分(提升项目的维护性),解决script中的代码乱的问题
9.2 Vue3中常见API
1.createApp() ==>创建一个应用实例
//main.js
import {crreateApp} from 'vue'
import App from './App.vue'
import router from './router'
import stroe from './store'
const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')
2.provide/inject ==>依赖注入
//祖先组件
provide('key',data)
//后代组价
const injectedData =inject('key')
3.directive 自定义指令
4.mixin 全局混入 局部
5.app.config.globalProperties
获取vue这个全局对象的属性和方法
可以添加属性或者方法到全局中
6.nextTick
等待下一次DOM更新刷新的工具方法,nextTick返回一个Promise,回调函数是防在Promise中,所以是异步执行的
7.computed
计算属性 有缓存
8.reactive ref
定义动态数据 ref可以定义普通类型的
9.watch
监听 Vue3自动深度监听
10.markRaw()
不被new Proxy代理,说白了就是静态数据
11.defineProps()
接收父组件传递的值,子组件使用setup形式,需要用defineProps接收
12.defineEmits()
用法:
import {defineEmits} from 'vue';
const emit = defineEmits(['customEvent'])
const handleClick = ()=>{
emit('customEvent','参数')
}
在这个实例中声明了一个名为customEvent的事件,然后使用返回的emit函数来触发这个事件
在父组件中监听事件
Vue3的常见响应式数据类型 ref,reactive,toRef,toRefs ref:用于创建一个响应式引用可以是任何类型的 reactive:用于创建一个深度响应式的对象,适用于复杂数据结构 toRef:用于从响应式对象中创建一个单个属性的引用 toRefs:用于将响应式对象的每个属性转换为ref
teleport组件 是体格传送门 假如自己写弹出框,需要在页面居中位置展示,不受当前组件的限制,可以把盒子传送到body中
![[工业自动化-1]：PLC架构与工作原理](https://img-blog.csdnimg.cn/ce10a1471ed14382bc58364cf8bd5209.png)
还没有评论，来说两句吧...