Vue学习笔记整理

原文链接：https://blog.csdn.net/weixin_49896519/article/details/109586165

自己整理的一点东西，做个备忘录

1、生命周期钩子函数.每个什么周期函数内需要处理哪些业务逻辑.
1. BeforeCreate函数：
在实例初始化后被调用 ，这个时候的this 不能用，在data中的数据 methods的方法 还有 watcher中的事件 都获取不到

2.Created函数：
实例已经创建完成了，实例对象已经完成了，这时候可以访问 data 中的 数据 ，一级 methods中的方法和 watcher 中的事件了，但是 不能操作 dom 节点
挂载阶段。

3.Beforemounte：
在挂载开始前被调用 render函数 第一次被调用

4.mounted:
挂载完毕 ，这时候可以使用 dom 节点 ，一些需要dom的操作这时候才可以进行

5.BeforeUpdate
组件更新前 也就是说 数据 更新了 但是vue中的组件（事件）对应dom 内部中的数据没有变 所以说叫做组件更新前

6.Updated
组件更新完成之后的操作
vue中的组件（事件）已经对应dom 内部中的数据了

7.beforeDestroy
实例销毁之前调用 ，在 这个时候实例还是可以用的

8.Destroy
摧毁阶段 vue的 生命周期结束 ，实例 不能用了

2、vue.component和vue.extend有哪些区别.在哪些场景可以用到.
Vue.component 是用来全局注册组件的方法，其作用是将通过 Vue.extend 生成的扩展实例构造器注册（命名）为一个组件，可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用类似于 new myVue 这样的构造函数来生成组件实例，并挂载到自定义元素上，当然实际情况要比这复杂得多，还需要处理 props 数据传递、slot 内容分发、自定义事件、组件生命周期……事宜。

3、computed watch和methods三者有哪些区别.
computed:计算属性：一个数据受多个数据的影响

watch：侦听属性：一个数据影响多个数据

深度监听：deep: true

4、data 和props区别.如何合理划分它们俩之间的界限.
data是每个组件的私有内存，可以在其中存储需要的任何变量。props是将数据从父组件传递到子组件的方式。

5、name属性有哪些具体的应用.
1、组件递归操作

2、配合keep-alive对组件缓存做限制（include/exclude=“name”）

3、在dev-tools中使用

6、 keep alive有哪些什么作用.
keep-alive可以在组件切换时，保存其包裹的组件的状态，使其不被销毁，防止多次渲染。
其拥有两个独立的生命周期钩子函数 actived 和 deactived，使用keep-alive包裹的组件在切换时不会被销毁，而是缓存到内存中并执行 deactived 钩子函数，命中缓存渲染后会执行 actived 钩子函数。

7、.如何在vue项目中实现动画.有哪几种方式.
vue内置组件transition

animate.css插件

wow.js ----> 需引入animate，滚动到元素的位置展现动画

原生css

8、vue router有几种路由方式.
跳转路由的几种方式：

a、声明式：

根据路由路径（/home/sort/detail）跳转 点击查看子页面

根据路由名称（detail）跳转 点击查看子页面 :to="" 可以实现绑定动态的 路由 和 参数

b、编程式：

1） this.$router.push({path: ‘/home/sort/detail’,query:{id: ‘abc’}})

2） this.$router.push({name: ‘detail’,params:{id: ‘abc’}})

​

备注： params 和 query 传参的区别：

​ 1、params传参时 参数不会出现在url的路径上面， 但是刷新页面时param里面的数据会消失

​ 2、query传参时 参数出现在url的路径上面， 刷新页面时query里面的数据不变

9、路由鉴权路由守卫
第一步：路由拦截 router.beforeEach
首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由， 否则就进入登录页面。

第二步：拦截器 ,要想统一处理所有http请求和响应，就得用上 axios 的拦截器。通过配置http response inteceptor，当后端接口返回401 Unauthorized（未授权），让用户重新登录**

10、vue.use使用.

1. 首先vue.use用来注册插件

2.这个插件必须是一个对象

3.步骤是先定义插件,再use，在new

11、如何封装组件的
首先，可以看到前端工程下有一个components目录，创建个文件夹创建 index.vue 文件

然后在index.vue中写自己的代码。为了规范，注意代码中的name命名XxButton，以后使用的组件就是XxButton

然后在components下还有一个index.js文件，要在index.js中注册上自己定义的组件，这个index.js也一定要在main.js中引入，不然就无法使用。当然，你也可以直接在main.js中直接注册组件，这里为了便于组件的统一管理，就在components下建了一个index.js来统一注册组件。

.最后，在页面开发中，就可以愉快的使用我们注册的组件啦。
————————————————

原文链接：https://blog.csdn.net/weixin_49896519/article/details/109586165