vue component created没有触发_vue常见知识点

一、vue的双向绑定原理（vue的原理、简单说一下双向数据绑定）
vue是采用数据劫持结合发布者-订阅者模式的方式，通过object.defineProperty()来劫持各个属性的setter和getter，在数据变动时发布消息给订阅者，触发响应的监听回调
具体步骤：
第一步：需要observe的数据对象进行递归遍历，给各个属性加上setter和getter，从而监听数据的变化
第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，一旦数据变动，就更新视图
第三步：watcher订阅者是observe和complie之间通信的桥梁
第四步：MVVM作为数据绑定的入口，整合observe、compile和watcher三者，通过observe来监听自己的model数据变化，通过compile来解析编译模板指令，最终利用watcher搭起observe和compile之间的桥梁，达到数据变化，视图更新
二、MVVM的理解
MVVM 由 Model、View、ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM， 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
三、详细说一下你对vue生命周期的理解
vue生命周期指的是vue实例从创建到销毁的过程。包括8个阶段，创建前/后、渲染前/后、更新前/后、销毁前/后。

1. beforeCreate（创建前）：vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
2. created（创建后）：vue实例的数据对象data有了，但是$el还没有。
3. beforeMounte（渲染前）：vue实例的$el和data都初始化了，但是挂载之前还是虚拟的dom，data.message还未替换
4. mounted（渲染后）：vue实例挂载完成，data.message成功渲染。
5. beforeUpdate（更新前）：数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
6. updated（更新后）：在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
7. beforeDestroy（销毁前）：在实例销毁之前调用。实例仍然完全可用。
8. destroyed（销毁后）： 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

1、第一次加载时会触发那些生命周期答：会触发：beforeCreate（创建前）、created（创建后）、beforeMounte（渲染前）、mounted（渲染后）2、、生命周期的作用
答：控制整个vue实例的过程时会形成更好的逻辑3、vue页面请求时一般放在那个生命周期里
答：一般放在created或者mounted里面，看实际的需求，区别是created 页面还没渲染如果要操作dom节点的话没法找到dom，在mounted里面请求，dom渲染完毕, 你再去请求数据就会有空壳dom的情况, 影响布局。

四、怎么定义vuve-router的动态路由？怎么获取传过来的动态参数？ 在router目录下的index.js文件下，对path属性加上/：id。使用router对象的params.id
五、vue传参
1、直接调用$router.push()进行传参
直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/${id}`, })
在子组件中可以使用来获取传递的参数值
this.$route.params.id
2、router-link进行传参
父组件中：使用<router-link to="/需要跳转的路由路径/需要传递的参数"></router-link>标签进行导航
<router-link to="/child/123"></router-link>
子组件中：使用this.$route.params.id来接收路由参数
this.$route.params.id
3、通过路由属性中的name属性来确定匹配路由，通过params来传递参数
this.$router.push({ name: '/describe', params: { id: id } })
对应路由配置
{ path: '/describe', name: 'Describe', component: Describe }
子组件接收参数
this.$route.params.id
4、通过路由属性中的path属性来确定匹配路由，通过query来传递参数
this.$router.push({ path: '/describe', query: { id: id } })
对应路由配置
{    path: '/describe',    name: 'Describe',    component: Describe  }
子组件接收参数
this.$route.query.id
注意：
接收参数时，是this.$route，不是this.$router
六、query和params的区别
1、query要用path来引入，params要用name来引入，
2、接收参数时，分别是this.$route.query.name和this.$route.params.name（注意：是$route而不是$router）。
3、query更加类似于我们ajax中get传参，params则类似于post，前者在浏览器的地址栏中显示，params不显示
4、params传值一刷新就没了，query传值刷新还存在
七、vue-router有哪几种导航钩子
1、全局导航钩子：
前置钩子：router.beforeEach（to，from，next）作用：跳转前进行判断拦截
直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/describe/${id}`,
        })
注意：next 方法必须要调用，否则钩子函数无法 resolved
这三个参数 to 、from 、next 分别的作用：
1、to: Route，代表要进入的目标，它是一个路由对象
2、from: Route，代表当前正要离开的路由，同样也是一个路由对象
3、next: Function，这是一个必须需要调用的方法，而具体的执行效果则依赖 next 方法调用的参数
a、 next()：进入管道中的下一个钩子，如果全部的钩子执行完了，则导航的状态就是 confirmed（确认的）
b、next(false)：这代表中断掉当前的导航，即 to 代表的路由对象不会进入，被中断，此时该表 URL 地址会被重置到 from 路由对应的地址
c、next(‘/’) 和 next({path: ‘/’})：在中断掉当前导航的同时，跳转到一个不同的地址
d、next(error)：如果传入参数是一个 Error 实例，那么导航被终止的同时会将错误传递给 router.onError() 注册过的回调
后置钩子：router.afterEach（to、from）
router.afterEach((to,from) => { 	

if(to.meta && to.meta.title){

document.title = to.meta.title }else{

document.title = "666" } })
2、路由独享的钩子：beforeEnter
3、组件内的导航钩子：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
八、路由的跳转
1、this.$router.push()
2、router-link
九、SPA单页面，有什么优缺点？
SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。
优点：
1.良好的交互体验
2.良好的前后端工作分离模式
3.减轻服务器压力
缺点：
1.首屏加载慢
　解决方案：Vue-router懒加载、使用CDN加速、异步加载组件、服务端渲染
2.不利于SEO
　　解决方案：服务端渲染、页面预渲染、路由采用h5 history模式
3.不适合开发大型项目
十、封装vue组件的过程