当条件改变的时候v-if是通过DOM节点的添加和删除来控制节点的显示隐藏的,
v-show是通过css样式控制节点的显示隐藏的。
v-if的切换成本比较高,v-show渲染成本比较高,
所以当切换频繁的时候使用v-show,如果初次渲染数据较多的时候,使用v-if
vue组件可能存在多个实例,如果使用对象形式定义data,可能会导致它们共用一个data对象,那么状态变更会影响所有组件实例,这是不合理的采用函数的形式定义,在initData时会将作为工厂函数返回全新的data对象,有效避免了多个实例之间状态污染的问题。而在vue根实例创建过程中不存在这个限制,也是因为根实例只能有一个,不需要担心这种情况。
如果data是一个函数的话,这样每复用一次组件,就会返回一份新的data(类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据)
Object是引用数据类型,里面保存的是内存地址,单纯的写成对象形式,就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果
vue的$nextTick其本质是对js执行原理EventLoop的一种应用。
$nextTick的核心是利用promise,mutationObserver、setImmediate、setTimeout的原生
javascript方法来模拟对应的微/宏任务的实现,本质是为了利用JavaScript的这些异步回调任务队列来实现vue框架中自己的异步回调队列。
nextTick是典型的将底层的javascript执行原理应用到具体案例中的示例,引入异步更新队列机制的原因:
vue2.0
vue2.0的双向数据绑定是通过数据劫持,结合发布订阅的方式来实现的,也就是说数据和视图同步,数据发生变化,视图也会发生变化,视图变化,数据也会随之发生改变。vue2的双向数据绑定核心是object.definedproperty()方法。给vue中的数据绑定get和set方法,当获取数据的时候,调用get方法,当修改数据的时候调用set方法。通过watcher监听器去更新视图,完成数据的双向绑定。
vue3.0
Object.defineProperty 的问题:在Vue中,Object.defineProperty无法监控到数组下标的变化,导致直接通过数组的下标给数组设置值,不能实时响应。目前只针对以上方法做了hack处理,所以数组属性是检测不到的,有局限性Object.defineProperty只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。Vue里,是通过递归以及遍历data对象来实现对数据的监控的,如果属性值也是对象那么需要深度遍历,显然如果能劫持一个完整的对象,不管是对操作性还是性能都会有一个很大的提升。
Proxy的两个优点:可以劫持整个对象,并返回一个新对象,有13种劫持。
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。
v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组或者对象,而 item 则是被迭代的数组元素的别名。
在 v-for 的时候,建议设置key值,并且保证每个key值是独一无二的,这便于diff算法进行优化。
在vue中,永远不要把v-if和v-for同时用在同一个元素上,会带来性能方面的浪费。
vue 2.x:当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级
vue 3.x:当 v-if 与 v-for 一起使用时,v-if 具有比 v-for 更高的优先级。
事件修饰符:
stop(阻止事件冒泡)
prevent(阻止默认行为)
self(只触发本身)
once(只触发一次)
captrue(事件捕获,与事件冒泡的方向相反,事件捕获由外向内。)
表单修饰符:
lazy(当光标离开标签之后,才会赋值给value)
trim(过滤掉两边的空格)
number(自动将用户输入的值转化为数值类型。)
键盘修饰符:
普通键(enter、tab、delete、space、esc、up…)
系统修饰键(ctrl、alt、meta、shift…)
鼠标修饰符:lefft,right,middle
除了我们常用的核心的默认内置的指令像是v-model,v-show,v-if等,vue也允许我们自定义指令,有的情况下,对普通dom元素进行底层操作,这个时候就需要自定义指令。
自定义指令时用来操作dom的,尽管vue推崇的是数据驱动视图的理念,但并不是所有的情况都适合数据驱动。自定义指令就是一种有效的补充和扩展,不仅可用于任何dom操作,而且是可复用的。
自定义指令分为两种:一种是自定义的局部指令,一种是全局指令
slot又名插槽,是vue的内容分发机制,组件内部的模板引擎使用slot元素作为承载分发内容的出口。插槽slot是子组件的一个模板标签元素,而在一个标签元素是否显示,以及怎么显示是父组件决定的。
slot又分为三类,默认插槽,具名插槽,作用域插槽。
当网速较慢,vue.js文件还没有加载完时,在页面上会显示{{message}}的字样,知道vue创建实例,编译模板时,dom才会被替换,所以这个过程屏幕是闪动的。
所以解决这个问题,需要在style样式中设置【v-cloak】{display:none}。在一般情况下,v-clock是一个解决初始化慢导致页面闪动的最佳实践,对于简单的项目很实用。
但是在具有工程化的项目里,比如使用了webpack和vue-router的项目中,html结构只是一个空的div元素,剩余的内容都是由路由去挂载不同的组件完成的,所以不需要v-cloak。
vue.set相应式新增与修改数据可以设置对象或数组的值,通过key或数组索引,可以触发视图更新。
vue.delete,删除对象或数组中元素,通过key或者数组索引,可以触发视图更新。
数组对象直接修改属性,可以触发视图更新
数组整体修改,可以触发视图更新
Vue包含一组观察数组变异的方法,使用它们改变数组也会触发视图更新不变异的方法:
不变异的方法:
vue3.0对vue的主要3个特点:响应式、模板、对象式的组件声明方式,进行了全面的更改,底层的实现和上层的api都有了明显的变化,基于Proxy重新实现了响应式,基于treeshaking内置了更多功能,提供了类式的组件声明方式。而且源码全部用typescript重写
从定义数据角度对比:
ref用来定义:基本类型数据
reactive用来定义对象(或数组)类型数据
备注:ref也可以用来定义对象(或数组)类型数据, 它内部会自动通过reactive转为代理对象。
从原理角度对比:
ref通过Object.defineProperty()的get与set来实现响应式(数据劫持)。
reactive通过使用Proxy来实现响应式(数据劫持), 并通过Reflect操作源对象内部的数据。
从使用角度对比:
ref定义的数据:操作数据需要.value,读取数据时模板中直接读取不需要.value。
reactive定义的数据:操作数据与读取数据:均不需要.value。
router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,包含了所有的路由包含了许多关键的对象和属性。例如history对象
route是一个跳转的路由对象,每一个路由都会有一个route对象,是一个局部的对象,可以获取对应的name,path,params,query等
表单控件在实际开发中是非常常见的,特别是对于用户信息的提交,需要大量的表单
Vue中使用v-model指令来实现表单元素和数据的双向绑定
案例的解析:
可以
<div class="pa">
<button v-on='
{
click:dianji,
focus:focu,
blur:blu
}'>
监听多个方法的写法
</button>
</div>
过滤器分为全局过滤器和局部过滤器,
全局过滤器可以在任何组件调用,局部过滤器只能在当前组件调用,
过滤器使用|管道符调用。可以串联使用。
建议在created里注册,在beforeDestory移出
在组件内的beforeRouteLeave中移除事件监听
vue2.0生命周期:
创建阶段
beforeCreate()创建前阶段,这个时候还不能使用data中的数据。
created()创建完成 最早可以使用data中的数据
挂载阶段
beforeMount:在挂载开始之前被调用: 相关的 render 函数首次被调用
mounted: 挂载完成,DOM节点挂载到实例上去之后调用该钩子
更新阶段
beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
updated: 数据更新完成并且DOM更新完成后调用销
销毁阶段
beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用
destroved:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定
vue3.0
单页应用 页面跳转---->js渲染
优点:页面切换快 缺点:首屏加载稍慢,seo差
多页应用 页面跳转---->返回html
优点:首屏时间快,seo效果好 缺点:页面切换慢
在template中可以使用标签实现跳转。
<router-link to="/t?index=1">
<button class="btn btn-default">点击跳转</button>
</router-link>
<router-link :to="{path:'/t',query: {index: 1}}">
<button class="btn btn-default">点击跳转</button>
</router-link>
this.$router.push({path: '/路径?参数=1'})
接收参数
this.$route.query.index
this.$router.push:跳转到指定url路径,并想history栈中添加一个记录,点击后退会返回到上一个页面
this.$router.replace:跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面 (就是直接替换了当前页面)
this.$router.go(n):向前或者向后跳转n个页面,n可为正整数或负整数
axios封装和api接口的统一管理
点击查看
如果请求来的数据是不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入vuex 的state里。
如果被其他地方复用,这个很大几率上是需要的,如果需要,请将请求放入action里,方便复用。
actions和之前讲的Mutations功能基本一样,不同点是,actions是异步的改变state状态,而Mutations是同步改变状态(会互相干扰).
actions 里面放我们函数,函数里面的参数context ,可以帮我们提交的mutations。主要逻辑其实就是在组件内部,调用actions之后,actions里面又去调用mutations,而mutations又去修改了state。
mutations:{
increate(state){ //payload:携带参数
state.counter++
}
},
actions:{
//放函数,
increateAction(context){
context.commit("increate")
}
}
import {useStore} from 'vuex'
import {onMounted} from "vue"
export default {
setup(){
const store=useStore()
onMounted(() => {
store.dispatch("getHomeMutidata")
}),
return{
}
}
vuex的数据在刷新浏览器后不会保存,
这是因为vuex实例store里的数据保存在运行内存中,页面刷新会重载vue实例,导致store里的数据丢失
解决方法:
slot又名插槽,是vue的内容分发机制,组件内部的模板引擎使用slot元素作为承载分发内容的出口。插槽slot是子组件的一个模板标签元素,而在一个标签元素是否显示,以及怎么显示是父组件决定的。slot又分为三类,默认插槽,具名插槽,作用域插槽。
默认插槽:又称匿名插槽,当slot没有指定name属性值的时候,一个组件内只能有一个匿名插槽。
具名插槽:带有具体名字的插槽,也就是带有name属性的slot,一个组件可以出现多个具名插槽。
作用域插槽:默认插槽,剧名插槽的一个变体,可以是匿名插槽,也可以是具名插槽,作用域插槽数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定,也就是说,作用域插槽的不同之处就在于,数据不在父组件身上,而是在子组件身上,且组件的结构和内容由父组件决定。作用域组件限定了组件内结构和数据的展示范围,以便在开发中我们可以根据一个组件而不断变换其中的内容和结构。
方式一:setup函数方法内,获取单个ref属性绑定的dom元素:
<template>
<h1 ref="box">Ref属性获取dom</h1>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
setup () {
let box = ref(null)
onMounted(function () {
console.log(box.value);
})
return {
box
}
}
}
</script>
方式二:获取多个ref属性绑定的dom元素。
<template>
<h3 :ref="getlist" v-for="index in 3">我是一组元素{{index}}</h3>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
name: 'Ref',
setup () {
// 获取v-for遍历的元素
// 定义一个空数组,接收所有的LI
// 定义一个函数,往空数组push Dom
let listDom = []
const getlist = (el) => {
listDom.push(el)
}
console.log(listDom);
return {
getlist
}
}
}
</script>
总结:
单个元素: 先声明ref响应式数据,返回给模板使用,通过ref绑定数据
遍历的元素:先定义一个空数组,定一个函数获取元素,返回给模板使用,通过ref绑定这个函数
vue2.0生命周期:
创建阶段
beforeCreate()创建前阶段,这个时候还不能使用data中的数据。
created()创建完成 最早可以使用data中的数据
挂载阶段
beforeMount:在挂载开始之前被调用: 相关的 render 函数首次被调用
mounted: 挂载完成,DOM节点挂载到实例上去之后调用该钩子
更新阶段
beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
updated: 数据更新完成并且DOM更新完成后调用销
销毁阶段
beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用
destroved:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定
vue3.0
点击查看
在vue文件中的style标签上,有一个特殊的属性:scoped。当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素。通过该属性,可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化。
vue中的scoped属性的效果主要通过PostCSS转译实现
PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性,然后,给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom,这种做法使得样式只作用于含有该属性的dom——组件内部dom。
在vue2中,我们知道vue2.x是使用Vue.prototype.xxxx = xxx 来定义全局变量,然后通过 this . xxxx=xxx来定义全局变量,然后通过this.xxxx=xxx来定义全局变量,然后通过this.xxx来获取全局变量。
但是在vue3中,这种方法显然不行了。因为vue3中在setup里面我们是无法获取到this的。
vue3.0依赖注入的方式注册使用全局变量
在 main.js 中
const app = createApp(App)
// 配置全局变量 页面中使用 inject 接收
app.provide('global',{
store,
axios
})
app.use()进行使用
采用这种方法在全局变量的创建上会更加的方便 , 而且不用担心会出现像axios在使用globalProperties设置为全局对象后丢失axios对象只剩 axios对象只剩axios对象只剩http之类的问题
vue3.0store仓库进行存放全局变量
创建store文件夹
store文件夹下创建index文件
state中定义状态或数据
const store = createStore({
state () {
return {
base:"",//基本数据
}
},
mutations: {
/*修改基础数*/
changeBase(state,base) {
state.base=base;
},
}
})
export default store;
vue2的响应式原理使用的是对象代理去实现的,对象代理中有一个get和set方法,当我们访问对象的时候就会触发get方法,当我们对对象中的值进行修改时会触发set方法。但是当我们给对象添加一个新的属性时对象代理是检测不到的,所以就会出现直接给对象添加属性响应式不生效的问题。
所以在vue中可以使用this.$set(对象名,‘属性名’,属性值)的方法去给对象添加属性,或者使用Vue.set(对象名,‘属性名’,属性值)的方法进行添加,添加之后的属性就带有响应式了
vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;
VUE双向数据绑定,其核心是 Object.defineProperty()方法,给Vue中的数据绑定get和set方法,当获取数据的时候,调用get方法,修改data中的数据的时候调用set方法,通过watcher监听器去更新视图,完成数据的双向绑定。
- 需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上setter和getter这样的话,
给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化。
- compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定
更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图。
3.watcher订阅者是observer和compile之间通信的桥梁,主要做的事情是:1*.在自身实例化时往属性订阅器里面添加自己
2*.组件自身必须有一个update()方法.3*待属性变动dep.notice()通知时,能调用自身的update()方法,
并触发complie中绑定的回调,则功成身退。
- MVVM作为数据绑定的入口,整合observer、compile和watcher三者,通过observer来监听自己的model数据变化,
通过compile来解析编译模板指令,最终利用watcher搭起来Observer和Compile之间的通信桥梁,达到数据变化,
视图更新,视图交互话变化,数据model变更的双向绑定效果。
优先级:
出现重名自变量,会根据书写顺序进行页面的展示。
vue2中的data和vue3中的setup
setup语法糖方式通信:
父传子——defineProps
1.父组件使用子组件,在子组件标签里面,通过标签属性的方式进行数据传递
<template>
<children :list="list"></children>
</template>
2.在子组件引入import { defineProps } from 'vue'
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
list: {
type: Array,
default: () => []
}
})
</script>
defineProps方法定义变量名进行接收,template模板中进行使用。
子传父——defineEmits
父组件在子组件标签上通过v-on绑定自定义事件,子组件通过 const emits = defineEmits([‘事件名’])进行接收。
在子组件B中通过defineEmits注册一个事件名,然后在子组件B的方法中通过emit传递给父组件A。在组件A中,就可以为一些元素添加该事件名绑定事件方法。然后组件A在script setup中写这个事件方法,传递的参数就是子组件B在emit传递过来的值。这个值我们赋值给const的ref定义的数据,从而动态修改数据。
<template>
<div>
<input v-model="value" type="text" placeholder="请输入" />
<button @click="handleAdd"> 添加 </button>
</div>
</template>
<script setup>
import { ref, defineEmits } from 'vue'
const value = ref('')
const emits = defineEmits(['add'])
const handleAdd = () => {
emits('触发的方法', 传递的参数)
}
</script>
setup函数嵌套方式通信
父传子props
父组件中使用子组件的标签
在 子组件 setup 方法内使用props 来接收父组件传过来的数据。
<template>
<div>
<Article :msg="name"></Article>
</div>
</template>
<script>
import Article from '@/components/Article.vue'
export default {
components: {
Article
},
setup() {
return {
name: '渐行渐远渐无书,水阔鱼沉何处问'
}
}
}
子传父 content
<template>
<div>
{{msg}}
<button @click="sendToParent">子组件向父组件传递数据</button>
</div>
</template>
<script>
export default {
props:['msg'],
setup(props, content) {
console.log(props.msg)
function sendToParent() {
content.emit('change')
}
return {
sendToParent
}
}
}
</script>
Composition
在 Vue3 Composition API 中,组件根据逻辑功能来组织的,一个功能所定义的所有 API 会放在一起(更加的高内聚,低耦合),即使项目很大,功能很多,我们都能快速的定位到这个功能所用到的所有 API,Compositon API,将某个逻辑关注点相关的代码全都放在一个函数里,这样当需要修改一个功能时,就不再需要在文件中跳来跳去。
composition APi:
Vue3.0中一个新的配置向,值为一个函数
setup是所有Composition API(组合API) ”表演的舞台“
组件中所有用到的:数据、方法等等,均要配置在setup中
语法糖里面的代码会被编译成组件setup()函数的内容,不需要通过return暴露声明的变量、函数以及import引入的内容,即可在template使用,并且不需要export default{}
作用:定义一个响应式的数据。
基本类型的数据:响应式依然是靠Object.defineProperty()的get和set完成的
对象类型的数据:内部“求助”了Vue3.0的一个新的函数------reactive函数
作用:定义一个对象类型的响应式数据
setup语法糖中引入defineEmits方法,传入数组,数组里面则是父组件传递的自定义事件名。
ve3中还可以自定义 hooks, 将单个功能封装成单个的函数,在集成到组件中去复用! 将功能进行解耦,方便维护、复用、可读性强
shallowReactive:只处理对象最外层的响应式(浅响应式)。
shallowRef:只处理基本数据类型的响应式,不进行对象的响应式处理。
概述:父子组件传参可以通过props和emit来实现,但是当组件的层次结构比较深时,props和emit就没什么作用了。vue为了解决这个提出了Provide / Inject;provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量.
作用:实现祖和后代组件间通信。
provide()函数
定义:提供一个值,可以被后代组件注入。
具体实现:
父组件有一个provide选项提供数据,后代组件有一个inject选项来开始使用这些数据。
provide(第一个参数是要注入的key,它可以是一个字符串或一个symbol;第二个参数是要注入的值(具体要传递给子孙组件的数据)。
import {reactive,provide} from "vue";
let person = reactive({name: '张三',age: 14});
provide('person',person);
inject()函数
定义: 注入一个由祖先(父)组件或整个应用提供的值
实现: 接收父(祖)组件传递过来的值.
inject(第一个参数,第二个参数(可选)):第一个参数是注入的key,来自父(祖)组件,它们两者是需要保持一致的
Vue会遍历父组件链,通过匹配key来确定所提供的值,如果父组件链上多个组件对同一个key提供了之,那么离得更近的将会覆盖链上更远的组件所提供的值
如果没有能通过key匹配到的值,inject()函数将返回undefined,除非提供一个默认值
第二个参数是可选的,即没有匹配到key时,使用默认值,它也可以是一个函数,用来返回某些创建起来比较复杂的值,如果默认值本身就是一个函数
那么必须将false作为第三个参数传入,表明这个函数就是默认值,而不是一个工厂函数。
与注册生命周期钩子的API类似,inject()必须在组件的setup()阶段同步调用
import {inject,toRefs} from "vue";
const person = inject('person');
// 若是使用解构,则会丢失响应式,修改数据时,页面不会更新,具体解决,可以引入toRef或toRefs函数
const {name,website} = toRefs(person);
模板使用
{{person.name}}---{{person.website}}
总结
provide/inject 做全局状态管理的原则:
多人协作时,做好作用域隔离;
尽量使用一次性数据作为全局状态
在 Vue 3 中,Hook 是通过 Vue 3 新特性的最重要的部分——组合式 API 来实现的.
本质是一个函数。自定义hook,就是将setup中使用过的组合式函数进行封装,实现代码复用。
把数据、方法、和生命周期钩子封装在一个js文件。
在src目录下新建子目录hooks,并在hooks目录下新建文件:usePoint.js
虚拟DOM/domDiff
我们常说的虚拟DOM是通过JS对象模拟出来的DOM节点,domDiff是通过特定算法计算出来一次操作所带来的DOM变化。react和vue中都使用了虚拟DOM,我们借着react聊聊虚拟DOM。
react中涉及到虚拟DOM的代码主要分为以下三部分,其中核心是第二步的domDiff算法:
把render中的JSX(或者createElement这个API)转化成虚拟DOM
状态或属性改变后重新计算虚拟DOM并生成一个补丁对象(domDiff)
通过这个补丁对象更新视图中的DOM节点
虚拟DOM不一定更快
干前端的都知道DOM操作是性能杀手,因为操作DOM会引起页面的回流或者重绘。相比起来,通过多一些预先计算来减少DOM的操作要划算的多。
但是,“使用虚拟DOM会更快”这句话并不一定适用于所有场景。例如:一个页面就有一个按钮,点击一下,数字加一,那肯定是直接操作DOM更快。使用虚拟DOM无非白白增加了计算量和代码量。即使是复杂情况,浏览器也会对我们的DOM操作进行优化,大部分浏览器会根据我们操作的时间和次数进行批量处理,所以直接操作DOM也未必很慢。
那么为什么现在的框架都使用虚拟DOM呢?因为使用虚拟DOM可以提高代码的性能下限,并极大的优化大量操作DOM时产生的性能损耗。同时这些框架也保证了,即使在少数虚拟DOM不太给力的场景下,性能也在我们接受的范围内。
而且,我们之所以喜欢react、vue等使用了虚拟DOM框架,不光是因为他们快,还有很多其他更重要的原因。例如react对函数式编程的友好,vue优秀的开发体验等,目前社区也有好多比较这两个框架并打口水战的,我觉着还是在两个都懂的情况下多探究一下原理更有意义一些
<a href="javascript:toA();">A页面</a>
<a href="javascript:toB();">B页面</a>
<div id="app"></div>
<script>
function render() {
app.innerHTML = window.location.pathname
}
function toA() {
history.pushState({}, null, '/a')
render()
}
function toB() {
history.pushState({}, null, '/b')
render()
}
window.addEventListener('popstate', render)
</script>
history API 提供了丰富的函数供开发者调用:
history.replaceState({}, null, '/b') // 替换路由
history.pushState({}, null, '/a') // 路由压栈
history.back() // 返回
history.forward() // 前进
history.go(-2) // 后退2次
history 模式的优缺点:
优点:路径比较正规,没有井号 #
缺点:兼容性不如 hash,且需要服务端支持,否则一刷新页面就404了。
<script>
<a href="#/a">A页面</a>
<a href="#/b">B页面</a>
<div id="app"></div>
<script>
function render() {
app.innerHTML = window.location.hash
}
window.addEventListener('hashchange', render)
render()
</script>
在上面的例子中,我们利用 a 标签设置了两个路由导航,把 app 当做视图渲染容器,当切换路由的时候触发视图容器的更新,这其实就是大多数前端框架哈希路由的实现原理。
hash 模式的优缺点:
优点:浏览器兼容性较好,连 IE8 都支持
缺点:路径在井号 # 的后面,比较丑。