vue2知识点梳理

Vue梳理

对于Vue，我们并不陌生；现在我们来梳理一下关于它的东西吧。

知识点

1.生命周期

最基本的就是它的生命周期。

1. beforeCreate ：
   在 beforeCreate 生命周期函数执行时，data 和 methods 中的数据都还没有初始化。
2. created ：
   在 created 中，data 和 methods 都已经被初始化好，数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。一般我们在该生命周期内发出 http 请求。
3. beforeMount ：
   在 beforeMount中，模板已经在内存中编辑完成，尚未把模板渲染到页面，也就是说页面中的元素，还没有被真正替换。相关的 render 函数首次被调用。 可在当前生命周期中进行一些数据的修改。
4. mounted ：
   实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好。可在当前生命周期中获取到真实的 DOM 元素，还可以在当前生命周期中做方法的实例化，给元素添加一个 ref 属性，且值必唯一，通过：this.$refs.属性获取 DOM 元素；还可访问子组件等。
5. beforeUpdate ：
   页面中的显示的数据，还是老数据，此时 data 数据是最新的，页面尚未和最新的数据保持同步，这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器，也可通过当前生命周期来检测数据的变化。
6. updated ：
   页面和 data 数据已经保持同步，都是最新的。如在当前生命周期中如果做实例化操作的时候必须做条件判断。
7. activated ：
   keep-alive 组件激活时调用。
8. deactivated ：
   keep-alive 组件停用时调用。
9. beforeDestroy ：
   实例销毁之前调用。
10. destroyed ：
    Vue 实例销毁后调用。通常这里用作于移除所有的事件监听和定时器，被 keep-alive 包裹的组件，不会被销毁，而是被缓存起来。

2.双向绑定-mvvm

1. 友好阐述 ：
   mvvm是实现了双向绑定的一种模式,在视图层或模型层改变数据都会实现页面和模型数据的一种动态改变。
   

2. 原理 ：
   vue在创建 vm 时，会将数据配置到实例中，然后通过 Object.defineProperty 方法，为数据动态的添加 getter 与 setter 方法。当获取数据的时候，会触发对应的 getter 方法，当设置数据的时候，触发对应的 setter 方法。然后当 setter 方法触发完成，内部会进一步触发watcher,数据改变后视图就更新完毕了。
   深入理解可以看: https://blog.csdn.net/weixin_44209472/article/details/88651509?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165882865116782388047920%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=165882865116782388047920&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduend~default-3-88651509-null-null.142^v34pc_rank_34,185^v2control&utm_term=vue%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9Amvvm&spm=1018.2226.3001.4187.

3.计算属性（computed）、方法（methods）和监听属性（watch）

1. 方法（methods） ：
   我的理解是将一段逻辑以一函数的形式展示出来就叫做方法。
2. 计算属性（computed） ：
   我们在模板(HTML)中放入太多的逻辑会让模板过重且难以维护，而且不好阅读。这个时候就需要计算属性 computed ；总的来说，计算属性走缓存 ，只要计算属性处理过数据之后，数据在没有改变的时候，无论你在页面调用多少次，他都只执行一次， 然后剩下的调用都是从缓存中进行读取的 ，节省资源函数 。而方法（methods）只要被调用那么就会执行 ，调用多少次执行多少次，比较消耗资源。
3. 监听属性（watch） ：
   当我们需要在数据变化时去执行异步或开销较大的操作时，这个时候需要属性检测（watch）。而不要使用计算属性，因为计算属性是同步的（需要立即返回结果），监听 data 中的数据，如果数据改变，那么 watch 就会收到通知调用一个函数(我们就可以在这个函数中完成指定的逻辑)：

    // An highlighted block
    // 第一种方式：监听整个对象，每个属性值的变化都会执行handler
    // 注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的
         example: {
             // 每个属性值发生变化就会调用这个函数
             handler(newVal, oldVal) {
                 console.log('oldVal:', oldVal)
                 console.log('newVal:', newVal)
             },
             // 立即处理 进入页面就触发
             immediate: true,
             // 深度监听 属性的变化
             deep: true
         },
         // 第二种方式：监听对象的某个属性，被监听的属性值发生变化就会执行函数
         // 函数执行后，获取的 newVal 值和 oldVal 值不一样
         'example.name'(newVal, oldVal) {
             console.log('oldVal:', oldVal)  
             console.log('newVal:', newVal)   
         }

4.路由

前端路由本质就是去监听 URL 的变化，匹配路由规则，然后显示相应的页面，并且无须刷新页面。

1. ** hash 模式和 history 模式** ：
   区别
   hash 出现在 URL 中，但不会被包含在 http 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面，Hash 相对来说更简单，并且兼容性也更好。
   history 是HTML5 新推出的功能，它利用了 html5 history interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器记录栈，在当前已有的 back、forward、go 基础之上，history 改变 URL 同样不会引起页面的刷新，只会更新浏览器的历史记录。
   原理
   hash 模式的原理是 onhashchange 事件，可以在 window 对象上监听这个事件。 history ：hashchange 只能改变 # 后面的代码片段，history api （pushState、replaceState、go、back、forward） 则给了前端完全的自由，通过在window对象上监听 popState() 事件。

2. ** $route 和 $router ** ：
   route是用来获取路由信息的，包括了路由的跳转方法，钩子函数等：

        <p>路径：{{$route.path}}</p>
		<p>参数：{{$route.params }}</p>
		<p>路由名称：{{$route.name}}</p>
		<p>路由查询参数：{{$route.query }}</p>

 router是用来操作路由的，包括path，params，hash，query，fullPath，matched，name等路由信息参数。

    this.$router.push("/login");
 	//使用对象的形式 
 	this.$router.push({ path:"/home" });
 	//使用对象的形式，参数为地址栏上的参数
 	this.$router.push({ path:"/home",query:{username:"jack"} }); 
 	//使用对象的形式 ，参数为params 不会显示在地址栏
 	this.$router.push({path:'/detail',params:{id:5,name:'lili'}})