vue的生命周期

beforeCreate
实例初始化之后，数据观测( data observer )和事件/ watcher 设置之前被调用。
created
实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测( data observer )，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。
beforeMount
模板编译/挂载之前被调用。在这个阶段，$el属性还不可见。
mounted
el被新创建的vm.$el替换，并挂载到实例上去之后调用。一旦 mounted 被调用，组件就处于可被渲染的状态。
beforeUpdate
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这个阶段后调用。
beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed
Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也会被销毁。

new Vue({
  data: {
    message: 'Hello Vue!'
  },
  beforeCreate: function () {
    console.log('beforeCreate: 实例被创建之前')
  },
  created: function () {
    console.log('created: 实例创建完成')
  },
  beforeMount: function () {
    console.log('beforeMount: 模板挂载之前')
  },
  mounted: function () {
    console.log('mounted: 模板挂载之后')
  },
  beforeUpdate: function () {
    console.log('beforeUpdate: 数据更新之前')
  },
  updated: function () {
    console.log('updated: 数据更新之后')
  },
  beforeDestroy: function () {
    console.log('beforeDestroy: 实例销毁之前')
  },
  destroyed: function () {
    console.log('destroyed: 实例销毁之后')
  }
}).$mount('#app');

Vue 中组件生命周期调用顺序是什么样的？

组件调用顺序是先父后子，渲染完成的顺序是先子后父。
组件销毁顺序是先父后子，销毁完成的顺序是先子后父。

在什么阶段才能访问操作DOM？

在钩子函数 mounted 调用之前，vue 已经将编译好的模版挂载到页面上，所以在 mounted 可以访问操作 Dom 。

vue 路由 hash 模式和 history 两种模式的区别？

hash 就是指 url 尾巴后的 # 号以及后面的字符，history 没有底带 #，外观上比 hash 模式好看些
区别（原理）
hash 原理：hash 通过监听浏览器的 onhashchange() 事件监听 URL 变化，查找对应的路由规则匹配相应的组件，在不刷新页面的情况下跳转路由。
history 原理：利用 H5 的 history 中新增的两个 API history.pushState() 或 history.replaceState() 修改 URL ，通过 onpopstate 监听URL变化，渲染对应的组件。
hash 能兼容到 IE8 ， history 只能兼容到 IE10。
hash —— 由于 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 hashchange 事件（ hashchange 只能改变 # 后面的 url 片段）；虽然 hash 路径出现在 URL 中，但是不会出现在 HTTP 请求中，对后端完全没有影响，因此改变 hash 值不会重新加载页面，基本都是使用 hash 来实现前端路由的。
history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。还有最重要一点是 history 路由害怕刷新，因为切换路由后浏览器中url改变，再刷新的话会重新向服务器发送请求，所以后端需要做简单的配置。

`$route`和 `$router`的区别是什么？

是路由信息对象跳转的路由对象，每一个路由都会有一个route对象，是一个局部对象，里面包含：path、params、hash、query、fullPath、matched、name等路由参数。
$router为 VueRouter 的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。

vue-router 如何传递参数？

使用 Params :参数不会显示在路径上，浏览器强制刷新参数会被清空

// 传递参数
this.$router.push({name:" demo", params: {id：111}})
// 接收参数
this.$router.params.id

2.使用 Query ：参数会显示在路径上，刷新时参数不会被清空

// 传递参数
this.$router.push({path: '/demo', query: {id：111}})
// 接收参数
this.$router.params.id

vue-router 如何响应路由参数的变化？

用 watch 监听$router对象。

watch: {
   $router(to, from) {
   	// 对路由变化作出响应
   }
}

2.使用导航守卫,组件内 beforeRouteUpdate(to,from,next) 导航钩子函数。

beforeRouteUpdate(to,from,next) {
	// 对路由变化作出响应
}

什么是导航守卫？

导航守卫（路由守卫），可以理解成是路由拦截，用来判断用户是否登录，是否有权限浏览等。

在 Vue 中如何实现动态组件？

Vue 中可以使用标签来实现动态组件。动态组件可以根据不同的数据渲染不同的组件，使应用程序更加灵活。
要实现动态组件，需要在组件选项中定义一个 components 对象，并将需要渲染的组件注册到这个对象中。然后在模板中使用标签，并将 is 属性绑定到一个动态的组件名上。当数据发生变化时，标签会自动渲染相应的组件。

1. 创建动态组件的容器
<template>
  <div>
    <component :is="currentComponent"></component>
  </div>
</template>

2. 动态组件数据属性
<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA', // 默认要渲染的组件
    };
  },
  // ...
}
</script>

3. 切换组件

methods: {
  toggleComponent() {
    // 根据需要切换要渲染的组件
    this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
  },
}

4. 注册组件

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  components: {
    ComponentA,
    ComponentB,
  },
  // ...
}
</script>

Vue动态组件非常适合根据条件、用户输入、权限或应用程序状态来切换和渲染不同的组件。它使你能够构建灵活的用户界面，并以模块化的方式组织你的应用。

在Vue中如何使用 SSR ?

Vue中可以使用 Vue Server-side Rendering（SSR）来进行服务器端渲染。SSR 可以提高应用程序的性能和可访问性，使应用程序更加友好。
要使用 SSR，需要先安装Vue的SSR依赖包，并进行相应的配置。在配置中，需要将Vue实例转换为一个可以在服务器端运行的对象，并使用 Vue SSR 的 API 来渲染组件和模板。最后，将渲染的结果返回给客户端。

参考：v2.ssr.vuejs.org/zh/guide/

前端学习计划vue（二）

vue的生命周期

Vue 中组件生命周期调用顺序是什么样的？

在什么阶段才能访问操作DOM？

vue 路由 hash 模式和 history 两种模式的区别？

$route和 $router的区别是什么？

vue-router 如何传递参数？

什么是导航守卫？

在 Vue 中如何实现动态组件？

在Vue中如何使用 SSR ?

`$route`和 `$router`的区别是什么？