阴影中的曙光

Vue温故而知新【1】

2019.07.24 / JavaScript,前端框架 / 点击 103 / 回复 0 / Vue

组件三大核心概念

  • 属性
    组件的属性由自定义属性(props中声明的属性)原生属性(默认自动挂载到组件根元素上,可以通过设置inheritAttrs为false取消)特殊属性(如class,style,ref,key等)
  • 事件
    普通事件 @click @input等 子组件内通过this.$emit(‘xxxx’)触发

修饰符事件 @input.trim,@click.stop等,一般用于原生html元素

  • 插槽
    普通插槽 <tempalte v-slot:xxx>…</template>

作用域插槽 <tempalte v-slot:xxx=“props”>…</template>
插槽组件在声明时用<slot name=“header”></slot>标识组件被调用时传入数据插入的位置,而在组件被使用时通过<组件名> <template v-slot:header> <h1>Here might be a page title</h1></template></组件名>的形式区分传入数据对应的是哪个插槽

写作单向数据流,读作双向绑定

底层实现为通过Object.defineProperty这个api做响应式更新。

虚拟Dom

在现代前端框架出现以前,前端几乎是被jQuery统治的,jQuery可以帮助我们方便的进行dom操作,将事件和dom进行多对多绑定,但是随着页面逐渐复杂,这种多对多的对应关系也会变的繁琐复杂,现代前端框架就是在这样的一个痛点下诞生的。现代前端框架引入了一个数据中间层,事件不再直接操作真实dom,而是采用操作数据和dom模板,最后由框架去生成dom这种方式。前端框架会维护一套虚拟的dom结构(各个节点存贮着事件,数据,类型等信息),当数据更新页面需要发生改变时,前端框架会生成出一套新的虚拟dom结构,然后跟旧版进行比较,找到需要改动的节点,然后针对性的进行改动,这样就能提升效率。
因为树节点比对很耗时,根据html结构的特点,框架在进行dom树比对的时候只比对相同层级的节点,以提高效率

数据驱动

每个Vue组件内数据基本上只有三个来源:父组件传递来的属性,组件自身状态data,状态管理器数据(vuex,Vue.observable等)但是要注意的是并不是数据改变就一定会触发组件的更新。Vue在对变量设置getter,setter后,会判断这个变量有没有被使用,使用了的才会加入到watch模块中,进行响应式变动。

计算属性

计算属性可以提高运行效率,以为计算属性在值不变的情况下即便整个组件刷新也不会重新计算,而通过方法计算的值只要模板更新就会重新计算。

依赖注入

provide / inject这两个关键字搭配使用,子组件内通过inject进行调用,此时逐层向父级进行内容查找,找到第一个包含引用变量名的provide停止,并且获取此值。可以通过此方式做跨层级,多组件的数据交互。