标签分类
技术文章
当前位置:主页 > 计算机编程 > vue.js > vue数据初始化initState的实例详解

vue数据初始化initState的实例

  • 发布时间:
  • 作者:码农之家原创
  • 点击:105

vue数据初始化initState的实例详解

这篇文章主要知识点是关于vue数据初始化,vue,initState,vue数据初始化initState的实例详解,的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Spring Boot+Vue全栈开发实战
  • 类型:Spring大小:196.3 MB格式:PDF出版:清华大学出版社作者:王松
立即下载

更多相关的学习资源可以参阅 程序设计电子书Web前端视频、等栏目。

数据初始化

Vue 实例在建立的时候会运行一系列的初始化操作,而在这些初始化操作里面,和数据绑定关联最大的是 initState。

首先,来看一下他的代码:

function initState(vm) {
 vm._watchers = [];
 var opts = vm.$options;
 if(opts.props) {
  initProps(vm, opts.props); //初始化props
 }
 if(opts.methods) {
  initMethods(vm, opts.methods); //初始化methods
 }
 if(opts.data) {
  initData(vm); //初始化data
 } else {
  observe(vm._data = {}, true /* asRootData */ );
 }
 if(opts.computed) {
  initComputed(vm, opts.computed); //初始化computed
 }
 if(opts.watch && opts.watch !== nativeWatch) {
  initWatch(vm, opts.watch); //初始化watch
 }
}

在这么多的数据的初始化中,props、methods和data是比较简单的(所以我就不详细介绍了☺),而computed 和 watch则相对较难,逻辑较复杂,所以我下面主要讲下computed 和 watch(以下代码部分为简化后的)。

initState里面主要是对vue实例中的 props, methods, data, computed 和 watch 数据进行初始化。

在初始化props的时候(initProps),会遍历props中的每个属性,然后进行类型验证,数据监测等(提供为props属性赋值就抛出警告的钩子函数)。

在初始化methods的时候(initMethods),主要是监测methods中的方法名是否合法。

在初始化data的时候(initData),会运行 observe 函数深度遍历数据中的每一个属性,进行数据劫持。

在初始化computed的时候(initComputed),会监测数据是否已经存在data或props上,如果存在则抛出警告,否则调用defineComputed函数,监听数据,为组件中的属性绑定getter及setter。如果computed中属性的值是一个函数,则默认为属性的getter函数。此外属性的值还可以是一个对象,他只有三个有效字段set、get和cache,分别表示属性的setter、getter和是否启用缓存,其中get是必须的,cache默认为true。

function initComputed(vm, computed) {
 var watchers = vm._computedWatchers = Object.create(null);

 for(var key in computed) {
  var userDef = computed[key];
  var getter = typeof userDef === 'function' ? userDef : userDef.get;

  //创建一个计算属性 watcher
  watchers[key] = new Watcher(
   vm,
   getter || noop,
   noop,
   computedWatcherOptions
  );

  if(!(key in vm)) {
   //如果定义的计算属性不在组件实例上,对属性进行数据劫持
   //defineComputed 很重要,下面我们再说
   defineComputed(vm, key, userDef);
  } else {
   //如果定义的计算属性在data和props有,抛出警告
  }
 }
}

在初始化watch的时候(initWatch),会调用vm.$watch函数为watch中的属性绑定setter回调(如果组件中没有该属性则不能成功监听,属性必须存在于props、data或computed中)。如果watch中属性的值是一个函数,则默认为属性的setter回调函数,如果属性的值是一个数组,则遍历数组中的内容,分别为属性绑定回调,此外属性的值还可以是一个对象,此时,对象中的handler字段代表setter回调函数,immediate代表是否立即先去执行里面的handler方法,deep代表是否深度监听。

vm.$watch函数会直接使用Watcher构建观察者对象。watch中属性的值作为watcher.cb存在,在观察者update的时候,在watcher.run函数中执行。想了解这一过程可以看我上一篇的 vue响应式系统--observe、watcher、dep中关于Watcher的介绍。

function initWatch(vm, watch) {
 //遍历watch,为每一个属性创建侦听器
 for(var key in watch) {
  var handler = watch[key];
  //如果属性值是一个数组,则遍历数组,为属性创建多个侦听器
  //createWatcher函数中封装了vm.$watch,会在vm.$watch中创建侦听器
  if(Array.isArray(handler)) {
   for(var i = 0; i < handler.length; i++) {
    createWatcher(vm, key, handler[i]);
   }
  } else {
   //为属性创建侦听器
   createWatcher(vm, key, handler);
  }
 }
}

function createWatcher(vm, expOrFn, handler, options) {
 //如果属性值是一个对象,则取对象的handler属性作为回调
 if(isPlainObject(handler)) {
  options = handler;
  handler = handler.handler;
 }
 //如果属性值是一个字符串,则从组件实例上寻找
 if(typeof handler === 'string') {
  handler = vm[handler];
 }
 //为属性创建侦听器
 return vm.$watch(expOrFn, handler, options)
}

computed

computed本质是一个惰性求值的观察者,具有缓存性,只有当依赖变化后,第一次访问 computed 属性,才会计算新的值

下面将围绕这一句话来做解释。

上面代码中提到过,当计算属性中的数据存在与data和props中时,会被警告,也就是这种做法是错误的。所以一般的,我们都会直接在计算属性中声明数据。还是那个代码片段中,如果定义的计算属性不在组件实例上,会运行defineComputed函数对数据进行数据劫持。下面我们来看下defineComputed函数中做了什么。

function defineComputed(target, key, userDef) {
 //是不是服务端渲染
 var shouldCache = !isServerRendering();
 //如果我们把计算属性的值写成一个函数,这时函数默认为计算属性的get
 if(typeof userDef === 'function') {
  sharedPropertyDefinition.get = shouldCache ?
   //如果不是服务端渲染,则默认使用缓存,设置get为createComputedGetter创建的缓存函数
   createComputedGetter(key) :
   //否则不使用缓存,直接设置get为userDef这个我们定义的函数
   userDef;
  //设置set为空函数
  sharedPropertyDefinition.set = noop;
 } else {
  //如果我们把计算属性的值写成一个对象,对象中可能包含set、get和cache三个字段
  sharedPropertyDefinition.get = userDef.get ?
   shouldCache && userDef.cache !== false ?
   //如果我们传入了get字段,且不是服务端渲染,且cache不为false,设置get为createComputedGetter创建的缓存函数
   createComputedGetter(key) : 
   //如果我们传入了get字段,但是是服务端渲染或者cache设为了false,设置get为userDef这个我们定义的函数
   userDef.get :
   //如果没有传入get字段,设置get为空函数
   noop;
  //设置set为我们传入的传入set字段或空函数
  sharedPropertyDefinition.set = userDef.set ?
   userDef.set :
   noop;
 }
 //虽然这里可以get、set都可以设置为空函数
 //但是在项目中,get为空函数对数据取值会报错,set为空函数对数据赋值会报错
 //而computed主要作用就是计算取值的,所以get字段是必须的
 //数据劫持
 Object.defineProperty(target, key, sharedPropertyDefinition);
}

在上一篇的 vue响应式系统--observe、watcher、dep 中,我有关于Watcher的介绍中提到,计算属性 watcher实例化的时候,会把options.lazy设置为true,这里是计算属性惰性求值,且可缓存的关键,当然前提是cache不为false。

cache不为false,会调用createComputedGetter函数创建计算属性的getter函数computedGetter,

先来看一段代码

function createComputedGetter(key) {
 return function computedGetter() {
  var watcher = this._computedWatchers && this._computedWatchers[key];
  if(watcher) {
   if(watcher.dirty) {
    //watcher.evaluate中更新watcher的值,并把watcher.dirty设置为false
    //这样等下次依赖更新的时候才会把watcher.dirty设置为true,然后进行取值的时候才会再次运行这个函数
    watcher.evaluate();
   }
   //依赖追踪
   if(Dep.target) {
    watcher.depend();
   }
   //返回watcher的值
   return watcher.value
  }
 }
}
//对于计算属性,当取值计算属性时,发现计算属性的watcher的dirty是true
//说明数据不是最新的了,需要重新计算,这里就是重新计算计算属性的值。
Watcher.prototype.evaluate = function evaluate() {
 this.value = this.get();
 this.dirty = false;
};
//当一个依赖改变的时候,通知它update
Watcher.prototype.update = function update() {
 //三种watcher,只有计算属性 watcher的lazy设置了true,表示启用惰性求值
 if(this.lazy) {
  this.dirty = true;
 } else if(this.sync) {
  //标记为同步计算的直接运行run,三大类型暂无,所以基本会走下面的queueWatcher
  this.run();
 } else {
  //将watcher推入观察者队列中,下一个tick时调用。
  //也就是数据变化不是立即就去更新的,而是异步批量去更新的
  queueWatcher(this);
 }
};

当options.lazy设置为true之后(仅计算属性watcher的options.lazy设置为true),每次依赖更新,都不会主动触发run函数,而是把watcher.dirty设置为true。这样,当对计算属性进行取值时,就会运行computedGetter函数,computedGetter函数中有一个关于watcher.dirty的判断,当watcher.dirty为true时会运行watcher.evaluate进行值的更新,并把watcher.dirty设置为false,这样就完成了惰性求值的过程。后面只要依赖不更新,就不会运行update,就不会把watcher.dirty为true,那么再次取值的时候就不会运行watcher.evaluate进行值的更新,从而达到了缓存的效果。

综上,我们了解到cache不为false的时候,计算属性都是惰性求值且具有缓存性的,而cache默认是true,我们也大多使用这个默认值,所以我们说 computed本质是一个惰性求值的观察者,具有缓存性,只有当依赖变化后,第一次访问 computed 属性,才会计算新的值 。

总结

以上所述是小编给大家介绍的vue数据初始化initState的实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

如果你觉得本文对你有帮助,欢迎转载,请注明出处,谢谢!

以上就是本次给大家分享的全部知识点内容总结,大家还可以在下方相关文章里找到详解vue axios封装请求状态、 解决axios.interceptors.respon、 儿童python编程入门书籍推、 等vue.js文章进一步学习,感谢大家的阅读和支持。

上一篇:Vue的markdown文档可以在线运行的实例方法

下一篇:vue项目刷新当前页面的方法

展开 +

收起 -

学习笔记
网友NO.430606

VueJS 组件参数名命名与组件属性转化问题

HTML 特性是不区分大小写的。所以,当使用的不是字符串模版,camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名: Vue.component('child', {// camelCase in JavaScriptprops: ['myMessage'],template: 'span{{ myMessage }}/span'}) 如果你使用字符串模版,则没有这些限制。 !-- kebab-case in HTML --child my-message="hello!"/child这个横线是在你驼峰式命名的参数大写字母前加上。 注意上面两个代码片段中的myMessage与my-message,vue.js会自动转化。 如果你注意看浏览器的控制台输出,里面也有信息提示。 如果你定义的prop参数不是驼峰式的,那就不用加横线,写的什么就用什么名。 PS:下面看下vue组件参数传递命名 背景 今天在父子组件传值的时候,父组件的值死活传不到子组件中,断点调试也没有值,后来打开控制台发现警告信息,html语句中不识别大写字母,再一看,参数是驼峰命名,难不成是这个问题,遂百度之,确实如此,html中不支持大下写,所以父组件传值的时候,参数名应该用短横线连接。 注意 错误示例: my-component :userName='userName'/my-component 正确示例: my-component :userName='userName'/my-component 总结 以上所述是小编给大家介绍的VueJS 组件参数名命名与组件属性转化问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会……

网友NO.855447

vue环形进度条组件实例应用

在做项目的时候,最好只使用一套组件库,但是很多时候我们的组件库里面没有我们需要的组件,这个时候我们还是需要自己写组件了,vux里面就没有环形进度条组件,所以需要自己写一个。 查找资料后发现了一个很好的实现方式,通过svg来实现,以前的时候学过一点svg但是没有怎么深入了解过。。。现在看来真是罪过,给出参考链接 https://segmentfault.com/a/1190000008149403 可以看出原作者使用了两种方式,我们选择了第二种,简单,而且好扩展。可以看到svg就想是canvas一样进行绘图。原文已经讲得很详细了,这里就附上自己写的组件吧。伸手党们也能愉快一点。 template svg :height="option.size" :width="option.size" x-mlns="http://www.w3.org/200/svg" circle :r="option.radius" :cx="option.cx" :cy="option.cy" :stroke="option.outerColor" :stroke-width="option.strokeWidth" fill="none" stroke-linecap="round"/ circle id="progressRound" :stroke-dasharray="completenessHandle" :r="option.radius" :cx="option.cx" :cy="option.cy" :stroke-width="option.strokeWidth" :stroke="option.innerColor" fill="none" class="progressRound" / /svg/templatescriptexport default { name: 'CommonLoopProgress', props: { completeness: { type: Number, required: true, }, progressOption: { type: Object, default: () = {}, }, }, data () { return { } }, computed: { completenessHandle () { let circleLength = Math.floor(2 * Math.PI * this.opti……

网友NO.571697

bmob js-sdk 在vue中的使用教程

BmobSDK的引入 将bmob js-sdk放在static目录,然后在index.html页面中已 script 标签的形式引入,就可以在vue中全局使用bmob js-sdk !DOCTYPE htmlhtml head meta charset="utf-8" title/title script src="static/bmob-min.js"/script /head body div id="app"/div /body/html 在assets目录新建一个js文件夹,再创建key.js 用来存放bmob的应用key Bmob.initialize("你的Application ID", "你的REST API Key"); 在main.js中引入key.js,bmobsdk的引入就大功告成了,此刻就可以去请求一条数据庆祝一下了。[在Vue项目中的单js文件如果需要使用bmob的话,都需引入key.js,或填写bmob应用key] import Vue from 'vue'import App from './App'import router from './router'import './assets/js/key' //引入bmob js-sdkVue.config.productionTip = falsenew Vue({ el: '#app', router, render: h = h(App)}) 总结 以上所述是小编给大家介绍的bmob js-sdk 在vue中的使用教程,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的! ……

网友NO.744650

vue组件三大核心概念图文详解

前言 本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能。 本文的代码请猛戳 github博客 ,纸上得来终觉浅,大家动手多敲敲代码! 一、属性 1.自定义属性props prop 定义了这个组件有哪些可配置的属性,组件的核心功能也都是它来确定的。写通用组件时,props 最好用对象的写法,这样可以针对每个属性设置类型、默认值或自定义校验属性的值,这点在组件开发中很重要,然而很多人却忽视,直接使用 props 的数组用法,这样的组件往往是不严谨的。 // 父组件 props name='属性' :type='type' :is-visible="false" :on-change="handlePropChange" :list=[22,33,44] title="属性Demo" class="test1" :class="['test2']" : //注意:style 的优先级是要高于 style /props// 子组件 props: { name: String, type: { //从父级传入的 type,它的值必须是指定的 'success', 'warning', 'danger'中的一个,如果传入这三个以外的值,都会抛出一条警告 validator: (value) = { return ['success', 'warning', 'danger'].includes(value) } }, onChange: { //对于接收的数据,可以是各种数据类型,同样也可以传递一个函数 type: Function, default: () = { } }, isVisible: { type: Boolean, default: false }, list: { type: Array,……

<
1
>

Copyright 2018-2019 xz577.com 码农之家

版权责任说明