探索Vue底层实现原理系列（二）

一、Vue用的哪种设计模式？

属于发布-订阅模式，在new Vue的时候，在Observer中通过Object.defineProperty()达到数据劫持，代理所有数据的getter和setter属性，在每次触发setter的时候，都会通过Dep来通知Watcher，Watcher作为Observer数据监听器与Compile模板解析器之间的桥梁，当Observer监听到数据发生改变的时候，通过Updater来通知Compile更新视图，而Compile通过Watcher订阅对应数据，绑定更新函数，通过Dep来添加订阅者，达到双向绑定。

二、Vue中如何获取dom、操作dom、更新dom？

如何获取dom？        

在vue中使用了一个特别的方法对dom进行获取，即给dom添加一个ref属性，就可以通过this.$refs.名字来获取到该dom元素。

如何操作dom、更新dom？

通过refs.名字就可以拿到对应的真实dom，然后就可以用原生JS进行操作和更新。

当然vue框架本身就不需要dom操作的，通过修改相应的数据并再配合指令、模板语法就可以轻松的操作和更新dom。

三、Vue中如何使用ref绑定？

通过为组件或者标签添加ref属性，可以在js代码中使用全局api $refs获取dom元素或者组件，其上的方法或者属性可以进行操作。

<template>
    <div>
        <button @click="changeVal">修改内容</button>
        <hr>
        //ref 名为 iptVal
        <input type="text" ref="iptVal" value="~~未修改的内容">
    </div>
</template>
 
<script>
export default {
    methods: {
        changeVal() {
            this.$refs.iptVal.value = "？？这是修改后的"
            this.$refs.iptVal.style.backgroundColor = "red"
        }
    }
}
</script>

四、谈谈Vue的token存储

在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下：

1.第一次登录的时候，前端调后端的登录接口，发送用户名和密码

2.后端接收请求，验证用户名和密码，验证成功，就给前端返回一个token

3.前端拿到token，将token存储到localStroage和vuex中，并跳转路由页面

4.前端每次跳转路由，就判断localStroage中有无token，没有就跳转到登录页面，有则跳转到对应路由页面

5.每次调后端接口，都要在请求头中加token

6.后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（如：token过期）就返回401，请求头中没有token也返回401

7.如果前端拿到状态码401，就清除token信息并跳转到登录页面

五、token过期是如何处理的，续期怎么弄？

在开发中，我们经常会遇到使用token，token的作用是要验证用户是否处于登录状态，所以要请求一些只有登录状态才能查看的资源的时候，我们需要携带token。

一般的后端接口设置的token是有时效的，超时后就会失效，失效之后的处理策略一般会做两种处理：一种是直接跳转到登录页面，重新登陆。

另外一种如果返回token失效的信息，自动去刷新token，然后继续完成未完成的请求操作。