一文梳理 vue 面试题知识点

import { mutableHandlers } from "./baseHandlers"; // 代理相关逻辑import { isObject } from "./util"; // 工具方法
export function reactive(target) {  // 根据不同参数创建不同响应式对象  return createReactiveObject(target, mutableHandlers);}function createReactiveObject(target, baseHandler) {  if (!isObject(target)) {    return target;  }  const observed = new Proxy(target, baseHandler);  return observed;}
const get = createGetter();const set = createSetter();
function createGetter() {  return function get(target, key, receiver) {    // 对获取的值进行放射    const res = Reflect.get(target, key, receiver);    console.log("属性获取", key);    if (isObject(res)) {      // 如果获取的值是对象类型，则返回当前对象的代理对象      return reactive(res);    }    return res;  };}function createSetter() {  return function set(target, key, value, receiver) {    const oldValue = target[key];    const hadKey = hasOwn(target, key);    const result = Reflect.set(target, key, value, receiver);    if (!hadKey) {      console.log("属性新增", key, value);    } else if (hasChanged(value, oldValue)) {      console.log("属性值被修改", key, value);    }    return result;  };}export const mutableHandlers = {  get, // 当获取属性时调用此方法  set, // 当修改属性时调用此方法};

Vue.mixin({  beforeCreate() {    // ...逻辑        // 这种方式会影响到每个组件的 beforeCreate 钩子函数  },});

// 1.组件的渲染流程 调用Vue.component -> Vue.extend -> 子类 -> new 子类// Vue.extend 根据用户定义产生一个新的类function Vue() {}function Sub() { // 会将data存起来    this.data = this.constructor.options.data();}Vue.extend = function(options) {    Sub.options = options; // 静态属性    return Sub;}let Child = Vue.extend({    data:()=>( { name: 'zf' })});
// 两个组件就是两个实例, 希望数据互不感染let child1 = new Child();let child2 = new Child();
console.log(child1.data.name);child1.data.name = 'poetry';console.log(child2.data.name);
// 根不需要 任何的合并操作   根才有vm属性 所以他可以是函数和对象  但是组件mixin他们都没有vm 所以我就可以判断 当前data是不是个函数

// 源码位置 src/core/global-api/extend.jsexport function initExtend (Vue: GlobalAPI) {  Vue.extend = function (extendOptions: Object): Function {    extendOptions = extendOptions || {}    const Super = this    const SuperId = Super.cid    const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})    if (cachedCtors[SuperId]) {      return cachedCtors[SuperId]    }
    const name = extendOptions.name || Super.options.name    if (process.env.NODE_ENV !== 'production' && name) {      validateComponentName(name)    }
    const Sub = function VueComponent (options) {      this._init(options)    }    // 子类继承大Vue父类的原型    Sub.prototype = Object.create(Super.prototype)    Sub.prototype.constructor = Sub    Sub.cid = cid++    Sub.options = mergeOptions(      Super.options,      extendOptions    )    Sub['super'] = Super
    // For props and computed properties, we define the proxy getters on    // the Vue instances at extension time, on the extended prototype. This    // avoids Object.defineProperty calls for each instance created.    if (Sub.options.props) {      initProps(Sub)    }    if (Sub.options.computed) {      initComputed(Sub)    }
    // allow further extension/mixin/plugin usage    Sub.extend = Super.extend    Sub.mixin = Super.mixin    Sub.use = Super.use
    // create asset registers, so extended classes    // can have their private assets too.    ASSET_TYPES.forEach(function (type) {      Sub[type] = Super[type]    })    // enable recursive self-lookup    if (name) {       Sub.options.components[name] = Sub // 记录自己 在组件中递归自己  -> jsx    }
    // keep a reference to the super options at extension time.    // later at instantiation we can check if Super's options have    // been updated.    Sub.superOptions = Super.options    Sub.extendOptions = extendOptions    Sub.sealedOptions = extend({}, Sub.options)
    // cache constructor    cachedCtors[SuperId] = Sub    return Sub  }}

npm create vite@latest my-vite-app --template vue-ts

yarn add pinia

// main.tsimport { createApp } from "vue";import App from "./App.vue";import { createPinia } from "pinia";const pinia = createPinia();
const app = createApp(App);app.use(pinia);app.mount("#app");

//sbinsrc/store/user.tsimport { defineStore } from 'pinia'
// 第一个参数是应用程序中 store 的唯一 idexport const useUsersStore = defineStore('users', {  // 其它配置项})

<!-- src/App.vue --><script setup lang="ts">import { useUsersStore } from "../src/store/user";const store = useUsersStore();console.log(store);</script>

export const useUsersStore = defineStore("users", {  state: () => {    return {      name: "test",      age: 20,      sex: "男",    };  },});

<template>  <img alt="Vue logo" src="./assets/logo.png" />  <p>姓名：{{ name }}</p>  <p>年龄：{{ age }}</p>  <p>性别：{{ sex }}</p></template><script setup lang="ts">import { ref } from "vue";import { useUsersStore } from "../src/store/user";const store = useUsersStore();const name = ref<string>(store.name);const age = ref<number>(store.age);const sex = ref<string>(store.sex);</script>

import { useUsersStore, storeToRefs } from "../src/store/user";const store = useUsersStore();const { name, age, sex } = storeToRefs(store); // storeToRefs获取的值是响应式的

<template>  <img alt="Vue logo" src="./assets/logo.png" />  <p>姓名：{{ name }}</p>  <p>年龄：{{ age }}</p>  <p>性别：{{ sex }}</p>  <button @click="changeName">更改姓名</button></template><script setup lang="ts">import child from './child.vue';import { useUsersStore, storeToRefs } from "../src/store/user";const store = useUsersStore();const { name, age, sex } = storeToRefs(store);const changeName = () => {  store.name = "张三";  console.log(store);};</script>

<button @click="reset">重置store</button>// 重置storeconst reset = () => {  store.$reset();};

<button @click="patchStore">批量修改数据</button>// 批量修改数据const patchStore = () => {  store.$patch({    name: "张三",    age: 100,    sex: "女",  });};

store.$patch((state) => {  state.items.push({ name: 'shoes', quantity: 1 })  state.hasChanged = true})

store.$state = { counter: 666, name: '张三' }

export const useUsersStore = defineStore("users", {  state: () => {    return {      name: "test",      age: 10,      sex: "男",    };  },  getters: {    getAddAge: (state) => {      return state.age + 100;    },  },})

<template>  <p>新年龄：{{ store.getAddAge }}</p>  <button @click="patchStore">批量修改数据</button></template><script setup lang="ts">import { useUsersStore } from "../src/store/user";const store = useUsersStore();// 批量修改数据const patchStore = () => {  store.$patch({    name: "张三",    age: 100,    sex: "女",  });};</script>

export const useUsersStore = defineStore("users", {  state: () => {    return {      name: "test",      age: 20,      sex: "男",    };  },  getters: {    getAddAge: (state) => {      return state.age + 100;    },    getNameAndAge(): string {      return this.name + this.getAddAge; // 调用其它getter    },  },});

export const useUsersStore = defineStore("users", {  state: () => {    return {      name: "test",      age: 20,      sex: "男",    };  },  getters: {    getAddAge: (state) => {      return (num: number) => state.age + num;    },    getNameAndAge(): string {      return this.name + this.getAddAge; // 调用其它getter    },  },});

<p>新年龄：{{ store.getAddAge(1100) }}</p>

export const useUsersStore = defineStore("users", {  state: () => {    return {      name: "test",      age: 20,      sex: "男",    };  },  getters: {    getAddAge: (state) => {      return (num: number) => state.age + num;    },    getNameAndAge(): string {      return this.name + this.getAddAge; // 调用其它getter    },  },  actions: {    // 在实际场景中，该方法可以是任何逻辑，比如发送请求、存储token等等。大家把actions方法当作一个普通的方法即可，特殊之处在于该方法内部的this指向的是当前store    saveName(name: string) {      this.name = name;    },  },});

const saveName = () => {  store.saveName("poetries");};

<input type="text" :value="name" @input="onInput" @focus="onFocus" @blur="onBlur" />