vue前端面试

一 .v-if和v-show的区别

v-if 和 v-show 是 Vue.js 中两个常用的条件渲染指令，它们都可以根据条件决定是否渲染某个元素。但是它们之间存在一些区别。

语法：v-if 和 v-show 的语法相同，都接收一个布尔值作为参数。

<div v-if="show">Hello, World!</div>
<div v-show="show">Hello, World!</div>

条件渲染：v-if 会根据条件决定是否渲染整个元素，如果条件为 false，则元素不会被渲染；v-show 会根据条件决定是否显示元素，如果条件为 false，则元素会隐藏，但仍然存在于 DOM 中。

<div v-if="show">Hello, World!</div>
<div v-show="show">Hello, World!</div>

性能：v-if 会根据条件决定是否渲染整个元素，如果条件为 false，则元素不会被渲染，这种情况下，Vue.js 会销毁和重建元素，性能较差；v-show 会根据条件决定是否显示元素，如果条件为 false，则元素会隐藏，但仍然存在于 DOM 中，这种情况下，Vue.js 不会销毁和重建元素，性能较好。

总结：v-if 和 v-show 都可以根据条件决定是否渲染某个元素，但它们之间存在一些区别。v-if 会根据条件决定是否渲染整个元素，如果条件为 false，则元素不会被渲染，这种情况下，Vue.js 会销毁和重建元素，性能较差；v-show 会根据条件决定是否显示元素，如果条件为 false，则元素会隐藏，但仍然存在于 DOM 中，这种情况下，Vue.js 不会销毁和重建元素，性能较好。在实际使用中，可以根据具体需求选择合适的指令。

二.如何理解mvvm

MVVM（Model-View-ViewModel）是一种前端开发模式，它将数据与视图分离，从而提高代码的可维护性和可扩展性。

在 MVVM 模式中，Model 表示数据模型，View 表示视图，ViewModel 表示视图模型。数据模型负责存储数据，视图负责展示数据，视图模型负责将数据与视图进行绑定。

在 MVVM 模式中，视图模型负责将数据与视图进行绑定。当数据模型中的数据发生变化时，视图模型会自动更新视图，从而实现数据与视图的双向绑定。

以下是一个简单的 MVVM 示例：

<template>
  <div>
    <input v-model="searchText" placeholder="Search" />
    <p>Search text: {{ searchText }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: ''
    };
  }
};
</script>

在这个示例中，searchText 是数据模型，<input> 和 <p> 是视图，v-model 是视图模型。当用户在输入框中输入内容时，searchText 会自动更新，视图中的内容也会自动更新。

总结：MVVM 是一种前端开发模式，它将数据与视图分离，从而提高代码的可维护性和可扩展性。在 MVVM 模式中，视图模型负责将数据与视图进行绑定，实现数据与视图的双向绑定。

model-view-viewmodel的缩写，是一种设计思想。

model就是数据模型，用于定义数据修改和操作。

view是视图。

viewmodel是连接view和model的桥梁。

当数据改变时，viewmodel通过监听到数据变化，自动更新视图，当用户操作视图时，viewmodel可以监听视图变化，通知数据进行改动。

viewmodel通过双向绑定把view和model连接起来，他们之间的同步是自动的。

三.组件生命周期

Vue 组件的生命周期指的是组件从创建到销毁的一系列过程，可以分为创建、挂载、更新、销毁四个阶段。

创建阶段：在创建阶段，Vue 会进行一些初始化工作，如初始化数据、事件、计算属性等。
挂载阶段：在挂载阶段，Vue 会根据模板编译生成 DOM，并将数据与 DOM 进行绑定。
更新阶段：在更新阶段，Vue 会根据数据的变化，更新 DOM。
销毁阶段：在销毁阶段，Vue 会进行一些清理工作，如解绑事件、计算属性等。

以下是 Vue 组件的生命周期钩子函数：

beforeCreate：在创建阶段之前调用，此时 Vue 实例尚未被创建。
created：在创建阶段之后调用，此时 Vue 实例已经被创建，但 DOM 尚未被编译。
beforeMount：在挂载阶段之前调用，此时 DOM 尚未被编译。
mounted：在挂载阶段之后调用，此时 DOM 已经被编译，但尚未被渲染。
beforeUpdate：在更新阶段之前调用，此时 DOM 已经被渲染，但数据尚未被更新。
updated：在更新阶段之后调用，此时 DOM 已经被更新，但尚未被渲染。
beforeUnmount：在销毁阶段之前调用，此时 DOM 已经被渲染，但尚未被解绑。
unmounted：在销毁阶段之后调用，此时 DOM 已经被解绑，Vue 实例已被销毁。

总结：Vue 组件的生命周期指的是组件从创建到销毁的一系列过程，可以分为创建、挂载、更新、销毁四个阶段。在不同的生命周期阶段，Vue 会调用不同的生命周期钩子函数，我们可以通过这些钩子函数来执行一些特定的操作。

简言之：

创建

beforeCreate:属性和方法都不能使用

created:实例创建完成之后，可以使用和修改数据，但页面没有被渲染

挂载

beforemount:虚拟dom创建完成，即将渲染

mounted:把编译好的模板挂载到页面

更新

beforeUpdate:组件更新之前使用，数据是新的，页面上的数据是旧的，组件即将更新

updated:render重新渲染，数据和页面都是新的

销毁

beforeDestory:清除定时器等操作

destroyed:组件被销毁

使用keep-alive时多出两个

activited:组件激活时

deactivited:组件销毁时

四.在created和mounted去请求数据，有什么区别

在 Vue.js 中，created 和 mounted 是两个常用的生命周期钩子函数，都可以用来请求数据。但是它们之间存在一些区别。

调用时间：created 钩子函数在 Vue 实例被创建后立即调用，此时 Vue 实例的 data 和 methods 属性已经初始化，但 DOM 尚未被编译；mounted 钩子函数在 DOM 被编译后调用，此时 Vue 实例的 data 和 methods 属性已经初始化，DOM 已经渲染。
请求数据：在 created 钩子函数中请求数据，如果请求失败，可能会导致 Vue 实例无法被创建；在 mounted 钩子函数中请求数据，即使请求失败，也不会影响 Vue 实例的创建和渲染。
页面加载速度：在 created 钩子函数中请求数据，可能会导致页面加载速度变慢，因为请求数据需要时间；在 mounted 钩子函数中请求数据，可以确保在页面加载完成后立即请求数据，从而提高页面加载速度。

总结：created 和 mounted 都可以用来请求数据，但它们之间存在一些区别。created 钩子函数在 Vue 实例被创建后立即调用，此时 Vue 实例的 data 和 methods 属性已经初始化，但 DOM 尚未被编译；mounted 钩子函数在 DOM 被编译后调用，此时 Vue 实例的 data 和 methods 属性已经初始化，DOM 已经渲染。在实际使用中，可以根据具体需求选择合适的钩子函数来请求数据。

created:渲染前调用，先初始化数据。

mounted:渲染后调用，请求数据可能会出现闪屏，created不会。

请求的数据对dom有影响，使用created，与dom无关，可以放在mounted。

五.vue组件通信

Vue 组件通信主要有以下几种方式：

props 和 $emit：通过 props，父组件可以将数据传递给子组件；通过 $emit，子组件可以将数据传递给父组件。

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    {{ message }}
    <button @click="sendMessage">Send message to parent</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    sendMessage() {
      this.$emit('message-sent', 'Hello from child');
    }
  }
};
</script>

.sync 修饰符：在 Vue 2.3.0 版本中，引入了 .sync 修饰符，可以简化子组件修改父组件数据的操作。

<!-- 父组件 -->
<template>
  <div>
    <child-component :message.sync="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    {{ message }}
    <button @click="sendMessage">Send message to parent</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    sendMessage() {
      this.message = 'Hello from child';
      this.$emit('update:message', 'Hello from child');
    }
  }
};
</script>

Vuex：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式与库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit('increment');
    }
  },
  modules: {
    count: {
      state: {
        count: 0
      },
      mutations: {
        increment(state) {
          state.count++;
        }
      },
      actions: {
        increment(context) {
          context.commit('increment');
        }
      }
    }
  }
});

$root 和 $parent：通过 $root 和 $parent，可以访问到 Vue 实例的根节点和父节点。

<!-- 子组件 -->
<template>
  <div>
    {{ rootMessage }}
    {{ parentMessage }}
  </div>
</template>

<script>
export default {
  inject: ['rootMessage', 'parentMessage'],
  created() {
    console.log(this.$root); // 访问根节点
    console.log(this.$parent); // 访问父节点
  }
};
</script>

总结：Vue 组件通信主要有 props 和 $emit、.sync 修饰符、Vuex、$root 和 $parent 等方式。在实际项目中，可以根据具体需求选择合适的通信方式。

简言之：

父传子:props,$ref --引用信息对象会注册在父组件$refs对象上

子传父:$emit—子组件绑定自定义事件，子组件绑定接收

兄弟传:全局事件总线$bus用on和emit来进行数据传输

六.keep-alive

keep-alive 是 Vue.js 提供的一个生命周期钩子函数，它会在组件被销毁后，将其缓存到内存中，当再次访问时，会从缓存中取出组件实例，而不是重新创建一个新的实例。这样可以减少内存的消耗，提高页面的加载速度。

keep-alive 主要用于需要频繁切换的页面，如首页、列表页等。当用户在两个页面之间频繁切换时，使用 keep-alive 可以避免频繁地创建和销毁组件实例，从而提高页面的加载速度。

要使用 keep-alive，需要遵循以下步骤：

在需要缓存的组件上添加 keep-alive 属性。

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  keepAlive: true
};
</script>

在 keep-alive 生命周期钩子函数中，可以进行一些缓存数据的处理。

export default {
  name: 'MyComponent',
  keepAlive: true,
  mounted() {
    console.log('Component mounted');
  },
  destroyed() {
    console.log('Component destroyed');
  }
};

注意：keep-alive 主要用于需要频繁切换的页面，对于一些需要根据用户操作进行缓存的数据，可以使用 Vuex 等状态管理库进行管理。

是vue的内置组件，包裹组件时，会缓存不活跃的组件实例。

防止重复渲染、减少加载时间和性能消耗。

七. axios如何封装

Axios 是一个基于 Promise 的 HTTP 客户端，用于在浏览器和 Node.js 中发起 HTTP 请求。 Axios 具有以下特点：

支持 Promise API
支持拦截器
支持请求和响应的数据处理
支持取消请求
支持自动转换 JSON

下面是一个简单的 Axios 封装示例：

安装 Axios：

npm install axios

创建 axios.js 文件，封装 Axios：

import axios from 'axios';

const instance = axios.create({
  // 基本 URL
  baseURL: 'https://api.example.com',
  timeout: 5000,
});

// 请求拦截器
instance.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    return response;
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default instance;

在需要使用 Axios 的地方引入封装好的 Axios：

import axios from './axios';

axios.get('/users')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

在这个示例中，我们创建了一个名为 instance 的 Axios 实例，并设置了请求拦截器和响应拦截器。然后，我们将封装好的 Axios 实例导出，以便在其他地方使用。

注意：这个示例仅作为参考，实际项目中可能需要根据具体需求进行调整。

下载axios----创建实例----封装请求和响应拦截器----封装接口-----使用

八.vue路由传参

Vue.js 中的路由传参主要有以下几种方式：

使用 query 参数：在路由的路径中添加 query 参数，如 /search?keyword=xxx。在组件中，可以通过 this.$route.query 获取 query 参数。

// router.js
import VueRouter from 'vue-router';
import Search from './components/Search.vue';

const routes = [
  {
    path: '/search',
    name: 'Search',
    component: Search,
    props: true
  }
];

const router = new VueRouter({
  routes
});

export default router;

<!-- Search.vue -->
<template>
  <div>
    <h2>Search</h2>
    <p>Keyword: {{ keyword }}</p>
  </div>
</template>

<script>
export default {
  props: ['keyword']
};
</script>

使用 props：在路由的 props 属性中定义需要传递的参数，如 { keyword: String }。在组件中，可以通过 this.$route.params 获取 params 参数。

// router.js
import VueRouter from 'vue-router';
import Search from './components/Search.vue';

const routes = [
  {
    path: '/search/:keyword',
    name: 'Search',
    component: Search,
    props: {
      keyword: String
    }
  }
];

const router = new VueRouter({
  routes
});

export default router;

<!-- Search.vue -->
<template>
  <div>
    <h2>Search</h2>
    <p>Keyword: {{ keyword }}</p>
  </div>
</template>

<script>
export default {
  props: ['keyword']
};
</script>

使用 to 属性：在路由的 to 属性中，可以使用 { propName: propValue } 的形式传递参数。在组件中，可以通过 this.$route.params 获取 params 参数。

// router.js
import VueRouter from 'vue-router';
import Search from './components/Search.vue';

const routes = [
  {
    path: '/search',
    name: 'Search',
    component: Search,
    to: {
      name: 'Search',
      params: {
        keyword: 'xxx'
      }
    }
  }
];

const router = new VueRouter({
  routes
});

export default router;

<!-- Search.vue -->
<template>
  <div>
    <h2>Search</h2>
    <p>Keyword: {{ keyword }}</p>
  </div>
</template>

<script>
export default {
  props: ['keyword']
};
</script>

总结：Vue.js 中的路由传参主要有使用 query 参数、使用 props 和使用 to 属性三种方式。在实际项目中，可以根据具体需求选择合适的传参方式。

params传参:this.$router.push({name:'',params:{}})

this.$route.params.id

路由属性传参

this.$router.push({name:'/${item.id}'})

路由配置{path:'/index:id'}

query传参

this.$router.push({name:'index',query:{}})

九.路由hash模式和history有啥区别

路由的 hash 模式和 history 模式的主要区别在于 URL 的表现形式和浏览器的历史记录。

URL 表现形式：

hash 模式：URL 中会带有 # 符号，如 http://example.com/#/search。
history 模式：URL 中不会带有 # 符号，如 http://example.com/search。

浏览器历史记录：

hash 模式：在浏览器中，点击回退按钮会返回到上一个页面，而不是跳转到上一个 URL。
history 模式：在浏览器中，点击回退按钮会跳转到上一个 URL，而不是返回到上一个页面。

总结：hash 模式和 history 模式的主要区别在于 URL 的表现形式和浏览器的历史记录。在实际项目中，可以根据具体需求选择合适的路由模式。

hash地址上有#，history没有

地址栏回车刷新时，hash会加载相应页面，history会报404

hash支持低版本浏览器，因为H5新增的API

hash不会重新加载页面

history有历史记录，可以通过pushState和replaceState(0)去修改历史记录，并不立刻发送请求

history需要后台配置

十.路由拦截

Vue.js 中的路由拦截主要通过导航守卫来实现。导航守卫是 Vue Router 提供的全局导航守卫，可以在路由导航过程中执行一些操作，如拦截导航、改变导航参数等。

Vue Router 提供了以下几种导航守卫：

beforeEach：在导航守卫中，可以在导航到新路由之前执行一些操作。

// router.js
import VueRouter from 'vue-router';
import Search from './components/Search.vue';

const routes = [
  {
    path: '/search',
    name: 'Search',
    component: Search,
    beforeEach: (to, from, next) => {
      // 在这里可以执行一些操作，如验证用户是否登录
      if (!userLoggedIn) {
        next({ name: 'Login' });
      } else {
        next();
      }
    }
  }
];

const router = new VueRouter({
  routes
});

export default router;

beforeEnter：在导航守卫中，可以在导航到新路由之前执行一些操作。

// router.js
import VueRouter from 'vue-router';
import Search from './components/Search.vue';

const routes = [
  {
    path: '/search',
    name: 'Search',
    component: Search,
    beforeEnter: (to, from, next) => {
      // 在这里可以执行一些操作，如验证用户是否登录
      if (!userLoggedIn) {
        next({ name: 'Login' });
      } else {
        next();
      }
    }
  }
];

const router = new VueRouter({
  routes
});

export default router;

beforeRouteEnter：在导航守卫中，可以在导航到新路由之前执行一些操作。

// router.js
import VueRouter from 'vue-router';
import Search from './components/Search.vue';

const routes = [
  {
    path: '/search',
    name: 'Search',
    component: Search,
    beforeRouteEnter: (to, from, next) => {
      // 在这里可以执行一些操作，如验证用户是否登录
      if (!userLoggedIn) {
        next({ name: 'Login' });
      } else {
        next();
      }
    }
  }
];

const router = new VueRouter({
  routes
});

export default router;

beforeRouteUpdate：在导航守卫中，可以在导航到新路由之前执行一些操作。

// router.js
import VueRouter from 'vue-router';
import Search from './components/Search.vue';

const routes = [
  {
    path: '/search',
    name: 'Search',
    component: Search,
    beforeRouteUpdate: (to, from, next) => {
      // 在这里可以执行一些操作，如验证用户是否登录
      if (!userLoggedIn) {
        next({ name: 'Login' });
      } else {
        next();
      }
    }
  }
];

const router = new VueRouter({
  routes
});

export default router;

beforeRouteLeave：在导航守卫中，可以在导航离开当前路由之前执行一些操作。

// router.js
import VueRouter from 'vue-router';
import Search from './components/Search.vue';

const routes = [
  {
    path: '/search',
    name: 'Search',
    component: Search,
    beforeRouteLeave: (to, from, next) => {
      // 在这里可以执行一些操作，如保存当前路由信息
      saveCurrentRouteInfo();
      next();
    }
  }
];

const router = new VueRouter({
  routes
});

export default router;

总结：Vue.js 中的路由拦截主要通过导航守卫来实现。导航守卫是 Vue Router 提供的全局导航守卫，可以在路由导航过程中执行一些操作，如拦截导航、改变导航参数等。在实际项目中，可以根据具体需求使用导航守卫来实现

router.before e ach((to,from,next)=>{})

十一.vue的动态路由

在路由配置里设置meta属性，扩展权限相关字段，在路由导航守卫里判断这个权限标识实现动态的增加和跳转路由

十二…如何解决刷新后二次加载路由

window.location.reload()

matcher

cosnt router=createRouter()

export function resetRouter(){

const newRouter=creatRouter()

router.matcher=newRouter.matcher

}

十三.vuex刷新页面数据丢失

vuex会重新获取数据

把数据保存在浏览器缓存里cookie、localstorage、session

页面刷新时，再次请求数据，动态更新vuex里面的数据

十四.computed和watch区别

computed 和 watch 是 Vue.js 中两个重要的属性，它们都可以实现数据的双向绑定，但它们之间存在一些区别。

定义方式：computed 是通过 Object.defineProperty() 方法来定义的，而 watch 是通过 Vue.prototype.watch 方法来定义的。
依赖收集：computed 属性会进行依赖收集，当依赖的数据发生变化时，会自动更新视图；而 watch 属性不会进行依赖收集，需要手动触发视图更新。
缓存：computed 属性会缓存计算结果，当依赖数据发生变化时，会重新计算；而 watch 属性不会缓存计算结果，每次都会重新计算。
性能：computed 属性性能比 watch 属性高，因为它进行了依赖收集，而 watch 属性需要手动触发视图更新。

总结：computed 和 watch 都可以实现数据的双向绑定，但它们之间存在一些区别。computed 属性会进行依赖收集，当依赖的数据发生变化时，会自动更新视图；而 watch 属性不会进行依赖收集，需要手动触发视图更新。computed 属性会缓存计算结果，当依赖数据发生变化时，会重新计算；而 watch 属性不会缓存计算结果，每次都会重新计算。computed 属性性能比 watch 属性高，因为它进行了依赖收集。

computed:计算属性，支持缓存，以来的属性值发生变化，计算属性会重新计算，否则用缓存，不支持异步，第一次加载就监听，函数中必须有return

watch:监听属性，监听data中数据的变化，不支持缓存，支持异步，第一次加载不监听，可以不用有return

十五.vuex使用场景和属性

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 适用于需要共享状态的应用程序。

Vuex 具有以下属性：

状态（state）：Vuex 通过 state 属性来定义应用程序的状态。状态可以是嵌套的对象，也可以是基本的数据类型。
突变（mutations）：Vuex 通过 mutations 属性来定义状态的突变。突变是同步的，并且只能通过 commit 方法来触发。
操作（actions）：Vuex 通过 actions 属性来定义异步操作。操作可以触发突变，也可以执行其他异步操作。
模块（modules）：Vuex 通过 modules 属性来定义模块。模块可以包含自己的状态、突变、操作和模块。

Vuex 适用于以下场景：

单页面应用程序：Vuex 适用于需要共享状态的单页面应用程序。
多组件应用程序：Vuex 适用于需要共享状态的多组件应用程序。
需要状态持久化的应用程序：Vuex 适用于需要状态持久化的应用程序。
需要权限控制的应用程序：Vuex 适用于需要权限控制的应用程序。

使用 Vuex 的步骤：

安装 Vuex：

使用 npm 或 yarn 安装 Vuex：
```
npm install vuex --save
```
或
```
yarn add vuex
```

创建 Vuex store：

在项目中创建一个名为 store.js 的文件，并在其中创建一个 Vuex store：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {}
});

定义状态、突变、操作和模块：

在 store.js 文件中，可以定义状态、突变、操作和模块。例如：

state: {
  count: 0
},
mutations: {
  increment(state) {
    state.count++;
  }
},
actions: {
  increment(context) {
    context.commit('increment');
  }
},
modules: {
  count: {
    state: {
      count: 0
    },
    mutations: {
      increment(state) {
        state.count++;
      }
    },
    actions: {
      increment(context) {
        context.commit('increment');
      }
    }
  }
}

引入 store 到 main.js：

在 main.js 文件中，引入 store.js 并将其添加到 Vue 实例中：

import Vue from 'vue';
import App from './App.vue';
import store from './store';

new Vue({
  store,
  render: h => h(App)
}).$mount('#app');

使用 mapState、mapGetters、mapMutations 和 mapActions：

在 Vue 组件中，可以使用 mapState、mapGetters、mapMutations 和 mapActions 辅助函数来简化代码。例如：

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['increment']),
    ...mapActions(['increment'])
  }
};

总结：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 适用于需要共享状态的应用程序，如单页面应用程序、多组件应用程序

state:存储变量

getters:state的计算属性

mutations:提交更新数据的方法，同步

actions:异步操作

modules:模块化vuex

用户个人信息、购物车等

十六.vue双向绑定的原理

Vue.js 中的双向绑定是通过 Object.defineProperty() 方法实现的。这个方法可以让我们在访问或修改一个属性时执行一些自定义操作。Vue.js 利用这个方法实现了数据的双向绑定。

具体来说，Vue.js 会将数据对象中的每个属性转换为 getter 和 setter，从而实现数据的双向绑定。当数据对象中的属性被访问或修改时，getter 和 setter 会被触发，从而更新视图。

以下是一个简单的示例：

class Vue {
  constructor(data) {
    this.data = data;
    for (const key in data) {
      Object.defineProperty(this, key, {
        get() {
          return this.data[key];
        },
        set(value) {
          this.data[key] = value;
        }
      });
    }
  }
}

const vm = new Vue({
  data: {
    count: 0
  }
});

console.log(vm.count); // 输出 0
vm.count = 1;
console.log(vm.count); // 输出 1

在这个示例中，我们创建了一个简单的 Vue 类，它将数据对象中的每个属性转换为 getter 和 setter。当我们访问或修改 vm.count 时，getter 和 setter 会被触发，从而更新视图。

Vue.js 利用这个原理实现了数据的双向绑定，从而实现数据和视图的同步。

通过数据劫持结合发布者订阅者模式，利用object.defineProperty()劫持各个属性的setter和getter，在数据发生变化时发布消息给订阅者，触发相应的监听回调渲染视图。

十七.diff和虚拟dom

diff 和虚拟 DOM 是前端性能优化的重要技术。diff 算法用于计算新旧 DOM 之间的差异，从而实现最小化页面重排和重绘。虚拟 DOM 是一种模拟 DOM 的技术，它将实际 DOM 转换为虚拟 DOM，然后在虚拟 DOM 上进行操作，最后将虚拟 DOM 转换回实际 DOM。

diff 算法的核心思想是将新旧 DOM 进行比较，找出它们之间的差异，然后将差异应用到实际 DOM 上。diff 算法的实现方式有很多，如深度优先搜索（DFS）、广度优先搜索（BFS）等。

虚拟 DOM 的实现方式是将实际 DOM 转换为虚拟 DOM，然后将虚拟 DOM 存储在内存中。当需要更新 DOM 时，先将新的虚拟 DOM 转换回实际 DOM，然后将新 DOM 与旧 DOM 进行比较，找出差异，最后将差异应用到实际 DOM 上。

以下是一个简单的示例：

// 假设这是实际 DOM
const oldDom = document.createElement('div');
oldDom.innerHTML = '<p>Hello, World!</p>';

// 创建虚拟 DOM
const vdom = {
  type: 'div',
  props: {},
  children: [
    {
      type: 'p',
      props: {},
      children: ['Hello, World!']
    }
  ]
};

// 将虚拟 DOM 转换回实际 DOM
const newDom = createElement(vdom);

// 比较新旧 DOM，找出差异
const patches = diff(oldDom, newDom);

// 将差异应用到实际 DOM 上
applyPatches(oldDom, patches);

在这个示例中，我们首先创建了一个实际 DOM 和一个虚拟 DOM。然后，我们将虚拟 DOM 转换回实际 DOM，并比较新旧 DOM，找出差异。最后，我们将差异应用到实际 DOM 上。

通过使用 diff 和虚拟 DOM，我们可以实现前端性能优化，减少页面重排和重绘。

虚拟dom，描述元素与元素之间的关系，创建的一个js对象。

如果组件内有响应的数据，数据发生改变时，render函数会生成一个新的虚拟dom，新的虚拟dom会和旧的虚拟dom进行比对，找到需要修改的虚拟dom内容，然后去对应的真实dom中修改。

diff是虚拟dom对比时用的，返回一个patch对象来存储两个节点不同的地方，最后用patch里的记录信息更新真实dom。