怎样刷 vue 面试题

function observer(value) { // proxy reflect    if (typeof value === 'object' && typeof value !== null)    for (let key in value) {        defineReactive(value, key, value[key]);    }}
function defineReactive(obj, key, value) {    observer(value);    Object.defineProperty(obj, key, {        get() { // 收集对应的key 在哪个方法（组件）中被使用            return value;        },        set(newValue) {            if (newValue !== value) {                observer(newValue);                value = newValue; // 让key对应的方法（组件重新渲染）重新执行            }        }    })}let obj1 = { school: { name: 'poetry', age: 20 } };observer(obj1);console.log(obj1)

class Observer {  // 观测值  constructor(value) {    this.walk(value);  }  walk(data) {    // 对象上的所有属性依次进行观测    let keys = Object.keys(data);    for (let i = 0; i < keys.length; i++) {      let key = keys[i];      let value = data[key];      defineReactive(data, key, value);    }  }}// Object.defineProperty数据劫持核心 兼容性在ie9以及以上function defineReactive(data, key, value) {  observe(value); // 递归关键  // --如果value还是一个对象会继续走一遍odefineReactive 层层遍历一直到value不是对象才停止  //   思考？如果Vue数据嵌套层级过深 >>性能会受影响  Object.defineProperty(data, key, {    get() {      console.log("获取值");
      //需要做依赖收集过程 这里代码没写出来      return value;    },    set(newValue) {      if (newValue === value) return;      console.log("设置值");      //需要做派发更新过程 这里代码没写出来      value = newValue;    },  });}export function observe(value) {  // 如果传过来的是对象或者数组 进行属性劫持  if (    Object.prototype.toString.call(value) === "[object Object]" ||    Array.isArray(value)  ) {    return new Observer(value);  }}

var a=[1,2,3,4]var b=[1,2,3,4]delete a[0]console.log(a)  //[empty,2,3,4]this.$delete(b,0)console.log(b)  //[2,3,4]

npm install

npm run dev

npm run build

npm run build --report

// source.vue被vue-loader处理之后返回的代码​// import the <template> blockimport render from 'source.vue?vue&type=template'// import the <script> blockimport script from 'source.vue?vue&type=script'export * from 'source.vue?vue&type=script'// import <style> blocksimport 'source.vue?vue&type=style&index=1'​script.render = renderexport default script

import script from 'source.vue?vue&type=script

import script from 'babel-loader!vue-loader!source.vue?vue&type=script'

<style scoped lang="scss">

import 'source.vue?vue&type=style&index=1&scoped&lang=scss'

import 'style-loader!css-loader!sass-loader!vue-loader!source.vue?vue&type=style&index=1&scoped&lang=scss'

// <template lang="pug">import 'vue-loader/template-loader!pug-loader!source.vue?vue&type=template'​// <style scoped lang="scss">import 'style-loader!vue-loader/style-post-loader!css-loader!sass-loader!vue-loader!source.vue?vue&type=style&index=1&scoped&lang=scss'

<div id="app"></div><script>    let vm = new Vue({        el: '#app',        template: `<div>            // <span>hello world</span> 是静态节点            <span>hello world</span>                // <p>{{name}}</p> 是动态节点            <p>{{name}}</p>        </div>`,        data() {          return { name: 'test' }        }    });</script>

export function compileToFunctions(template) {  // 我们需要把html字符串变成render函数  // 1.把html代码转成ast语法树  ast用来描述代码本身形成树结构 不仅可以描述html 也能描述css以及js语法  // 很多库都运用到了ast 比如 webpack babel eslint等等  let ast = parse(template);  // 2.优化静态节点：对ast树进行标记,标记静态节点    if (options.optimize !== false) {      optimize(ast, options);    }
  // 3.通过ast 重新生成代码  // 我们最后生成的代码需要和render函数一样  // 类似_c('div',{id:"app"},_c('div',undefined,_v("hello"+_s(name)),_c('span',undefined,_v("world"))))  // _c代表创建元素 _v代表创建文本 _s代表文Json.stringify--把对象解析成文本  let code = generate(ast);  //   使用with语法改变作用域为this  之后调用render函数可以使用call改变this 方便code里面的变量取值  let renderFn = new Function(`with(this){return ${code}}`);  return renderFn;}

<!-- 在双花括号中 -->{ message | capitalize }
<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></div>

filters: {  capitalize: function (value) {    if (!value) return ''    value = value.toString()    return value.charAt(0).toUpperCase() + value.slice(1)  }}

Vue.filter('capitalize', function (value) {  if (!value) return ''  value = value.toString()  return value.charAt(0).toUpperCase() + value.slice(1)})
new Vue({  // ...})

{ message | filterA | filterB }

{{ message | filterA('arg1', arg2) }}

<div id="app">  <p>{{ msg | msgFormat('疯狂','--')}}</p></div>
<script>    // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat    Vue.filter('msgFormat', function(msg, arg, arg2) {        // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则        return msg.replace(/单纯/g, arg+arg2)    })</script>

Vue.filter('toThousandFilter', function (value) {  if (!value) return ''  value = value.toString()  return .replace(str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g, '$1,')})

{{ message | capitalize }}

_s(_f('filterFormat')(message))

// 变为this.$options.filters['filterFormat'](message) // message为参数

import { indentity,resolveAsset } from 'core/util/index' 
export function resolveFilter(id){  return resolveAsset(this.$options,'filters',id,true) || identity}

export function resolveAsset(options,type,id,warnMissing){ // 因为我们找的是过滤器，所以在 resolveFilter函数中调用时 type 的值直接给的 'filters',实际这个函数还可以拿到其他很多东西  if(typeof id !== 'string'){ // 判断传递的过滤器id 是不是字符串，不是则直接返回      return   }  const assets = options[type]  // 将我们注册的所有过滤器保存在变量中  // 接下来的逻辑便是判断id是否在assets中存在，即进行匹配  if(hasOwn(assets,id)) return assets[id] // 如找到，直接返回过滤器  // 没有找到，代码继续执行  const camelizedId  = camelize(id) // 万一你是驼峰的呢  if(hasOwn(assets,camelizedId)) return assets[camelizedId]  // 没找到，继续执行  const PascalCaseId = capitalize(camelizedId) // 万一你是首字母大写的驼峰呢  if(hasOwn(assets,PascalCaseId)) return assets[PascalCaseId]  // 如果还是没找到，则检查原型链(即访问属性)  const result = assets[id] || assets[camelizedId] || assets[PascalCaseId]  // 如果依然没找到，则在非生产环境的控制台打印警告  if(process.env.NODE_ENV !== 'production' && warnMissing && !result){    warn('Failed to resolve ' + type.slice(0,-1) + ': ' + id, options)  }  // 无论是否找到，都返回查找结果  return result}

function toString(value){  return value == null  ? ''  : typeof value === 'object'    ? JSON.stringify(value,null,2)// JSON.stringify()第三个参数可用来控制字符串里面的间距    : String(value)}

function parseFilters (filter) {    let filters = filter.split('|')    let expression = filters.shift().trim() // shift()删除数组第一个元素并将其返回，该方法会更改原数组    let i    if (filters) {        for(i = 0;i < filters.length;i++){            experssion = warpFilter(expression,filters[i].trim()) // 这里传进去的expression实际上是管道符号前面的字符串，即过滤器的第一个参数        }    }    return expression}// warpFilter函数实现function warpFilter(exp,filter){    // 首先判断过滤器是否有其他参数    const i = filter.indexof('(')    if(i<0){ // 不含其他参数，直接进行过滤器表达式字符串的拼接        return `_f("${filter}")(${exp})`    }else{        const name = filter.slice(0,i) // 过滤器名称        const args = filter.slice(i+1) // 参数，但还多了 ‘)’        return `_f('${name}')(${exp},${args}` // 注意这一步少给了一个 ')'    }}

// 项目中安装npm install axios --S// cdn 引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

import axios from 'axios'

axios({          url:'xxx',    // 设置请求的地址  method:"GET", // 设置请求方法  params:{      // get请求使用params进行参数凭借,如果是post请求用data    type: '',    page: 1  }}).then(res => {    // res为后端返回的数据  console.log(res);   })

function getUserAccount() {    return axios.get('/user/12345');}
function getUserPermissions() {    return axios.get('/user/12345/permissions');}
axios.all([getUserAccount(), getUserPermissions()])    .then(axios.spread(function (res1, res2) {     // res1第一个请求的返回的内容，res2第二个请求返回的内容    // 两个请求都执行完成才会执行}));

axios('http://localhost:3000/data', {  // 配置代码  method: 'GET',  timeout: 1000,  withCredentials: true,  headers: {    'Content-Type': 'application/json',    Authorization: 'xxx',  },  transformRequest: [function (data, headers) {    return data;  }],  // 其他请求配置...}).then((data) => {  // todo: 真正业务逻辑代码  console.log(data);}, (err) => {  // 错误处理代码    if (err.response.status === 401) {  // handle authorization error  }  if (err.response.status === 403) {  // handle server forbidden error  }  // 其他错误处理.....  console.log(err);});

if (process.env.NODE_ENV === 'development') {  axios.defaults.baseURL = 'http://dev.xxx.com'} else if (process.env.NODE_ENV === 'production') {  axios.defaults.baseURL = 'http://prod.xxx.com'}

devServer: {    proxy: {      '/proxyApi': {        target: 'http://dev.xxx.com',        changeOrigin: true,        pathRewrite: {          '/proxyApi': ''        }      }    }  }

const service = axios.create({    ...    timeout: 30000,  // 请求 30s 超时      headers: {        get: {          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来        },        post: {          'Content-Type': 'application/json;charset=utf-8'          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来        }  },})

// get 请求export function httpGet({  url,  params = {}}) {  return new Promise((resolve, reject) => {    axios.get(url, {      params    }).then((res) => {      resolve(res.data)    }).catch(err => {      reject(err)    })  })}
// post// post请求export function httpPost({  url,  data = {},  params = {}}) {  return new Promise((resolve, reject) => {    axios({      url,      method: 'post',      transformRequest: [function (data) {        let ret = ''        for (let it in data) {          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'        }        return ret      }],      // 发送的数据      data,      // url参数      params
    }).then(res => {      resolve(res.data)    })  })}

import { httpGet, httpPost } from './http'export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params })

// .vueimport { getorglist } from '@/assets/js/api'
getorglist({ id: 200 }).then(res => {  console.log(res)})

// 请求拦截器axios.interceptors.request.use(  config => {    // 每次发送请求之前判断是否存在token    // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况，此处token一般是用户完成登录后储存到localstorage里的    token && (config.headers.Authorization = token)    return config  },  error => {    return Promise.error(error)  })

// 响应拦截器axios.interceptors.response.use(response => {  // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据  // 否则的话抛出错误  if (response.status === 200) {    if (response.data.code === 511) {      // 未授权调取授权接口    } else if (response.data.code === 510) {      // 未登录跳转登录页    } else {      return Promise.resolve(response)    }  } else {    return Promise.reject(response)  }}, error => {  // 我们可以在这里对异常状态作统一处理  if (error.response.status) {    // 处理请求失败的情况    // 对不同返回码对相应处理    return Promise.reject(error.response)  }})

<input v-model='something'>
相当于
<input v-bind:value="something" v-on:input="something = $event.target.value">

父组件：<ModelChild v-model="message"></ModelChild>
子组件：<div>{{value}}</div>
props:{    value: String},methods: {  test1(){     this.$emit('input', '小红')  },},

<template>    <child-component v-bind="$attrs">        将非属性特性透传给内部的子组件    </child-component></template>

<template>  <h1>{{ msg }}</h1>  <comp foo="foo" bar="bar" /></template>

<template>  <div>    {{$attrs.foo}} {{bar}}  </div></template>
<script setup>defineProps({  bar: String})</script>

_createVNode(Comp, {    foo: "foo",    bar: "bar"})