vue知识点总结

December 01, 2020 2440

双向数据绑定的原理

vue使用双向绑定实现view和model层的同步更新，双向绑定的实现方式主要有数据劫持和发布订阅者模式。

使用Object.defineProperty实现双向数据绑定，对model中的数据的属性添加访问器，当数据被访问或者修改时，通过设置的setter和getter来实现对view层的更新

数据在html模板中有两种绑定方式：v-model来对value值进行绑定，和文本绑定。

v-model对value值进行绑定，当元素节点的属性值中包含V-model时，会将model中的对应的属性的值赋值给元素节点的value。然后对元素添加一个监听事件，当value发生变化时触发事件，通知model更新对应的属性的值。

当时文本节点绑定时，使用model中对应的属性的值来替换文本。对于文本的更新使用发布订阅者模式，将属性作为一个主题，文本节点设置一个订阅者对象，将订阅者都加入到属性主题的订阅者列表中。当Model层数据发送变化时，Model作为发布者向主题发出通知，主题再向订阅者推送，订阅者收到后更新自己的数据。

Object.defineProperty

Object.defineProperty的三个参数：（需要定义属性的对象，需要定义的属性，属性描述符）

属性描述符有：value属性的值、writable是否可写、enumerable是否可枚举、configurable是否可修改配置、get当访问属性时调用，set当修改属性时调用。

缺点：有一些属性的操作无法拦截，比如说通过下标修改数组数据，或者给对象新增属性，vue内部通过重写函数解决这个问题

3.0中使用proxy对对象进行代理，可以完美监听数据变化，但缺点时兼容性，是es6的语法。

vue中$router和$route的区别

  • this.$route：当前激活的路由的信息对象。每个对象都是局部的，可以获取当前路由的 path, name, params, query 等属性。

  • this.$router：全局的 router 实例。通过 vue 根实例中注入 router 实例，然后再注入到每个子组件，从而让整个应用都有路由功能。其中包含了很多属性和对象（比如 history 对象），任何页面也都可以调用其 push(), replace(), go() 等方法。

Vue 和 React 数据驱动的区别

在数据绑定上来说，vue的特色是双向数据绑定，而在react中是单向数据绑定。

vue中实现数据绑定靠的是数据劫持（Object.defineProperty()）+发布-订阅模式

vue中实现双向绑定

1
<input v-model="msg" />

react中实现单向绑定

1
<input value={this.state.msg} onChange={() => this.handleInputChange()} />

Vue的路由模式

hash模式 与 history模式

  • hash（即地址栏 URL 中的 # 符号)。
1
2
3
4
5
6
7
8
比如这个 URL：www.123.com/#/test，hash 的值为 #/test。

特点： hash 虽然出现在 URL 中，但不会被包括在 HTTP，因为我们hash每次页面切换其实切换的是#之后的内容，而#后内容的改变并不会触发地址的改变，
所以不存在向后台发出请求，对后端完全没有影响，因此改变 hash 不会重新加载页面。

每次hash发生变化时都会调用 onhashchange事件

优点：可以随意刷新
  • history（利用了浏览器的历史记录栈）
1
2
3
4
5
6
7
8
特点：利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）

在当前已有的 back、forward、go的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的URL，但浏览器不会立即向后端发送请求。

history：可以通过前进 后退控制页面的跳转，刷新是真是的改变url。

缺点：不能刷新，需要后端进行配置。由于history模式下是可以自由修改请求url，当刷新时如果不对对应地址进行匹配就会返回404。
但是在hash模式下是可以刷新的，前端路由修改的是#中的信息，请求时地址是不会变的

keep-alive

keep-alive是缓存页面，避免重复渲染，props有：include、exclude、max，include和exclude表示是否走缓存的页面，max表示最大缓存页面值

需要注意的是函数式组件是不会被keep-alive缓存的，因为它没有实例。以及使用时include的数组和页面名称要一致。

函数式组件

函数式组件只是一个接受props的函数，没有生命周期、实例和状态，所以也没有响应式数据和this上下文。

写法如下：

1
2
3
4
5
6
7
8
9
10
11
12
Vue.component('my-component', {
  functional: true,
  // Props 是可选的
  props: {
    // ...
  },
  // 为了弥补缺少的实例
  // 提供第二个参数作为上下文
  render: function (createElement, context) {
    // ...
  }
})

函数式组件接受render的第二个参数作为上下文。函数式组件只是函数，所以渲染开销也低很多。

slot插槽

slot插槽，相当于在组件中的占位符。有默认插槽、具名插槽、作用域插槽，默认插槽的

查看评论