前端八股文

一.数据

1.cookies

• 第一次请求服务器给浏览器，第二次请求自动携带。

• 用来做状态保持，http无状态

• 设置过期时间

  后端设置的cookies，前端不能修改

• 获取：
  document.cookie = ‘key=value;expires=GMT(格林威治时间)格式的日期型字符串;’

2.keep-alive的理解

1.动态组件

<keep-alive include="alive1">
​         <component :is="name"></component>
 </keep-alive>
import alive1 from "../components/alive1"
import alive2 from "../components/alive2"

二.vue2和vue3

1.混入

vue2

1.导出变量的形式
export const homeSensors = {
  ``mounted() {
    ``this``.$sensors.track(``'teacherHomePageview'``)
  ``},
    methods:{
        abc(){
            ``alert(1)
        ``}
    ``}
}

页面
import { homeSensors } from '@/mixins/sensorsMixin'
export default {
  mixins: [homeSensors],
}
调用
created() {
    this.abc()   //mixin里面的具体方法
  }

导出组件的形式
// mixin.js
export default{
	data(){
		return{
		}
	},
	methods:{
     ...}
}
// vue页面中引入
import mixin from 'mixin.js' //整个文件
export default{
	data(){
     },
	mixins: [mixin]
}```

vue3 选项式

import { computed, ref } from ``'vue'
export const common =  {
   ``mounted(){
    ``alert(``'我是mounted的方法'``)
  ``},
}

import {common} from '../../../mixins/common'
mixins: [common],	

vue3组合式

// mixin.js
import { computed, ref } from 'vue'
export default function () {
	setup(){
		const count = ref(1)
		const plusOne = computed(() => count.value + 1)
		function hello(){
			console.log('hello mixin'+plusOne.value)
		}
        //reruen !!
		return{
			count,
			plusOne,
			hello
		}
	}
}

// vue页面中引入
import mixin from 'mixin.js'
export default{
	setup(){
		const {count, plusOne, hello } = mixin() //调用引入的文件mixin方法 解构
		hello()
		console.log(count.value, plusOne.value)
	}
}

2.自定义指令

vue2

bind：只会调用一次，指令第一次绑定到元素时会调用(Dom树绘制前调用)

inserted：被绑定元素插入父节点时调用。（父节点存在）(Dom树绘制后调用)

update：元素第一次绑定不会触发，绑定的值发生更新触发，可能发生在其子节点更新之前。（更新前的状态）

componentUpdated：指令所在组件的VNode及其子VNode全部更新后调用。（更新后的状态）

unbind：只调用一次，指令与元素解绑时调用。

3.Vuex和Pinia的区别

三.八股文

1.原型和原型链

原型：每一个构造函数都有一个prototype属性指向一个对象，这个对象就是构造函数实例的原型

原型链：每一个实例都有一个__proto__属性指向原型对象，来获取原型对象上的属性和方法,原型对象也有一个__proto_属性指向另外一个原型对象,以此类推,直到原型链的最终端null为止，这个串成链的过程就是原型链