咬文嚼字vue系列(二)

Object.freeze()

Object.freeze()用于冻结对象，冻结后对象元素不能被删除，修改，添加新的元素，基本做到了唯一性，但如果冻结的元素中存在对象时，对象的元素并不会冻结，任然可以被修改等操作，就是涉及到内存空间的问题了。

由于 JavaScript 的限制，Vue 不能检测以下数组的变动

出现这种问题的主要原因是，vue对数组进行了区别对待，并没有如同object那样，对数据内容做深层的数据劫持，与监听（应为大多数数据都是用来遍历的，同时数据量一般都非常大，做深层次的数据劫持与监听，将耗费很大的性能，似乎也完全没有必要），但为了实现数据的双向绑定，对Array的push，pop，shift，unshift，splice，sort，reverse方法做了处理，同时提供了$set方法，实现数组内部变量的双向绑定，当然是用原数组替换的方式也可以达到你想要的效果，使用filter，concat，slice等方法。

备注：源码中就明确的写了相关方法处理。

// v2.5.21
/** not type checking this file because flow doesn't play well with* dynamically accessing methods on Array prototype*/import { def } from '../util/index'const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)const methodsToPatch = ['push','pop','shift','unshift','splice','sort','reverse'
]/*** Intercept mutating methods and emit events*/
methodsToPatch.forEach(function (method) {// cache original methodconst original = arrayProto[method]def(arrayMethods, method, function mutator (...args) {const result = original.apply(this, args)const ob = this.__ob__let insertedswitch (method) {case 'push':case 'unshift':inserted = argsbreakcase 'splice':inserted = args.slice(2)break}if (inserted) ob.observeArray(inserted)// notify changeob.dep.notify()return result})
})

v-model

适用于基础组件的编写

<input v-model="searchText">等价于<inputv-bind:value="searchText"v-on:input="searchText = $event.target.value"
>

input修饰符 .lazy .number .trim

v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。
你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步<input v-model.lazy="msg" >自动将用户的输入值转为数值类型
<input v-model.number="age" >自动过滤用户输入的首尾空白字符
<input v-model.trim="name" >

事件修饰符.once

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

事件名命名注意事项

v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。

关于.native和$listeners的使用场景

.native适用于父组件给子组件添加根节点上的事件监听，如果子组件的根节点非想监听的目标元素，这是#listener就能提供帮助。

$listeners旨在为父组件提供，在子组件上任意节点的事件监听，特别使用于复杂的子组件结构。

// 官网例子
Vue.component('base-input', {inheritAttrs: false,props: ['label', 'value'],computed: {inputListeners: function () {var vm = this// `Object.assign` 将所有的对象合并为一个新对象return Object.assign({},// 我们从父级添加所有的监听器this.$listeners,// 然后我们添加自定义监听器，// 或覆写一些监听器的行为{// 这里确保组件配合 `v-model` 的工作input: function (event) {vm.$emit('input', event.target.value)}})}},template: `<label>{{ label }}<inputv-bind="$attrs"v-bind:value="value"v-on="inputListeners"></label>`
})

.sync的使用

子组件使用$emit传递参数
this.$emit('update:title', newTitle)父组件使用update更新参数
v-bind:title="doc.title"
v-on:update:title="doc.title = $event"而.sync相当于父组件update的简写
v-bind:title.sync="doc.title"注意：使用修饰符sync，其参数只能是变量，而非表达式('' || doc.title)

作用域插槽v-slot

    <current-user><h5>插槽</h5><template v-slot:person>person.firstName</template><template v-slot:user>{{user.firstName}}</template></current-user><current-user v-slot:user="users"><h5>插槽变量传递</h5>{{users.firstName}}</current-user><div><h5>非作用域插槽参数</h5><current v-slot="users">{{users.firstName}}</current></div><current v-slot="{users}"><h5>作用域插槽参数</h5>{{users.firstName}}</current><current v-slot="{users: person}"><h5>作用域插槽参数名变换</h5>{{person.firstName}}</current><current v-slot="{ persons = { firstName: 'Peterss' } }"><h5>作用域插槽参数自我赋值</h5>{{persons.firstName}}</current><current-prop v-slot="{users}" :userp="user"><h5>作用域插槽prop用于传递参数</h5>{{users.firstName}}</current-prop>

源代码

ref获取组件的属性

<base-input ref="usernameInput"></base-input>this.$refs.usernameInput
来获取一些相关的操作

emit在组件上的特殊运用

组件
<prop v-medol="info"></prop>相当于<prop :value="info" @input="info = $event"></prop>所以一般会监听value 使用 $emit('input', val) 更新参数

参考文献：

1.https://cn.vuejs.org/

1.https://blog.csdn.net/u013210620/article/details/82888431

咬文嚼字vue系列(二)相关推荐

[VUE系列二]vue官方文档总结和整理
一.选项/数据 1. data 类型:Object | Function 组件的定义只接受Function 因为组件可能被用来创建多个实例.如果data仍然是一个纯粹的对象,则所有的实例将共享引用同一 ...
咬文嚼字vue系列(一)
1.基础知识 AMP,CMP,UMP的由来 AMD是RequireJS在推广过程中对模块定义的规范化产出,AMD是异步加载模块,推崇依赖前置. CMD是SeaJS在推广过程中对模块定义的规范化产出,对 ...
通过自定义组件学习Vue系列（二）【时间轴】（附源码）
需求: 用于升级日志的显示效果图: 实现原理: 主要区域分为两块,时间区和内容区,时间区是画一个圆点和显示一个时间,内容区左边一个竖线和文字显示然后做一下循环,将每个日期的数据显示出来布局采用f ...
Vue系列vue-router的参数传递的两种方式（五）
Vue系列vue-router的参数传递的两种方式前言一.编写Profile页面二.编写App.vue入口三.路由配置,index.js 四.对比route.params方式传参五.项目中 ...
VUE系列-Vue中组件的应用(三)
大家好,我是前端岚枫,一枚二线城市的程序媛,上篇主要跟分享了<VUE系列-Vue核心应用(二)>,今天主要跟大家分享我整理的vue的组件相关的,主要包括组件声明.组件种类.组件间的几种 ...
vue系列：vue的常用属性和方法
vue系列:vue的常用属性vm.$ el.vm.$ data.vm.$ options.vm.$ refs和方法vm.$ mount().vm.$ nextTick().vm.$ set().vm. ...
【前端vue——系列6】vue连接摄像头并实现摄像头暂停，计时，截图到本地等功能
系列文章总结 [前端vue--系列1]vue的路由 [前端vue--系列2]vue中的data是函数而不是对象与computed的实现原理 [前端vue--系列3]vue框架的优缺点:vue实现双向绑 ...
Vue系列之分支结构v-if和v-show
文章の目录一.v-if 二.v-else-if 1.限制: 2.用法三.v-else 1.限制 2.不需要表达式四.v-show 写在最后一.v-if 根据v-if后面表达式的值的真假来有条件 ...
搜索引擎ElasticSearchV5.4.2系列二之ElasticSearchV5.4.2+kibanaV5.4.2+x-packV5.4.2安装
相关博文: 搜索引擎ElasticSearchV5.4.2系列一之ES介绍搜索引擎ElasticSearchV5.4.2系列二之ElasticSearchV5.4.2+klanaV5.4.2+x-p ...

咬文嚼字vue系列(二)

咬文嚼字vue系列(二)相关推荐

最新文章

热门文章