冰星寒水

冰星寒水 查看完整档案

北京编辑  |  填写毕业院校黑车公司  |  前端 编辑 dwz.cn/5wTUxp 编辑
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

冰星寒水 分享了头条 · 2020-08-30

简单介绍了 Array 在跨 realm 的表现以及应用

赞 0 收藏 0 评论 0

冰星寒水 关注了用户 · 2020-04-26

幸运儿 @zd9027

关注 110

冰星寒水 收藏了文章 · 2018-04-02

vue-cli3.0初体验~

之前因为parcel的出现,webpack也跟进了零配置
vue-cli自然也不能落下,cli3.0也升级到webpack4,并增加许多新特性

安装并创建一个项目

支持npm和yarn

npm install -g @vue/cli
# or
yarn global add @vue/cli
# 使用vue命令,创建项目(不同于cli2.0的init,create)
vue create my-project

cli3.0开始支持选项了,觉得对命令行不熟悉的朋友们更友好了~
本来只有2个预选项的(default和manually),我之前创建并保存了一个full

clipboard.png

所以我们主要看一下 manually(default包含在manually里)

首先是特性选择

clipboard.png

然后是每个特性的配置文件存放方式(我选了都放在一起~)

clipboard.png

最后问你 是否 保存为预设选项

clipboard.png

其实 里面 还有别的询问 都是大同小异 问你,在选过你用npm还是yarn安装后就不再问了(之后可以在.vuerc文件内修改,cd~能看到)会直接帮你创建项目

clipboard.png

之后运行npm run serve就好了(也不是以前的 npm run dev了)

clipboard.png

然后打印出前台页面地址和后台服务器地址 会自动打开网页

clipboard.png

配置你的项目

虽说是0配置,其实是把某些可以统一的配置项帮使用者配置好了。
当然默认配置也是可以更改的。

初始目录

我这个是什么特性也没有选的~
(上面选manually只是看看而已~并没有选择任何特性~hhh)
应该说是最精简的目录了~
相比cli2.0的目录,看起来更清爽~

clipboard.png

public相当于原来的static,里面的index.html是项目的入口
src同以前

cli3.0没有build和config了,
想要配置的话,需要在项目根目录下创建vue.config.js文件
(官方文档这么说哒~)
关于详细的配置信息,在此放一份 官方说明 供大家参考~

module.exports = {
  // 项目部署的基础路径
  // 我们默认假设你的应用将会部署在域名的根部,
  // 比如 https://www.my-app.com/
  // 如果你的应用时部署在一个子路径下,那么你需要在这里
  // 指定子路径。比如,如果你的应用部署在
  // https://www.foobar.com/my-app/
  // 那么将这个值改为 `/my-app/`
  baseUrl: '/',

  // 将构建好的文件输出到哪里
  outputDir: 'dist',

  // 是否在保存的时候使用 `eslint-loader` 进行检查。
  // 有效的值:`ture` | `false` | `"error"`
  // 当设置为 `"error"` 时,检查出的错误会触发编译失败。
  lintOnSave: true,

  // 使用带有浏览器内编译器的完整构建版本
  // 查阅 https://cn.vuejs.org/v2/guide/installation.html#运行时-编译器-vs-只包含运行时
  compiler: false,

  // 调整内部的 webpack 配置。
  // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
  chainWebpack: () => {},
  configureWebpack: () => {},

  // vue-loader 选项
  // 查阅 https://vue-loader.vuejs.org/zh-cn/options.html
  vueLoader: {},

  // 是否为生产环境构建生成 source map?
  productionSourceMap: true,

  // CSS 相关选项
  css: {
    // 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中)
    extract: true,

    // 是否开启 CSS source map?
    sourceMap: false,

    // 为预处理器的 loader 传递自定义选项。比如传递给
    // sass-loader 时,使用 `{ sass: { ... } }`。
    loaderOptions: {},

    // 为所有的 CSS 及其预处理文件开启 CSS Modules。
    // 这个选项不会影响 `*.vue` 文件。
    modules: false
  },

  // 在生产环境下为 Babel 和 TypeScript 使用 `thread-loader`
  // 在多核机器下会默认开启。
  parallel: require('os').cpus().length > 1,

  // 是否使用 `autoDLLPlugin` 分割供应的包?
  // 也可以是一个在 DLL 包中引入的依赖的显性的数组。
  // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#dll-模式
  dll: false,

  // PWA 插件的选项。
  // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli-plugin-pwa/README.md
  pwa: {},

  // 配置 webpack-dev-server 行为。
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理
    proxy: null, // string | Object
    before: app => {
      // `app` 是一个 express 实例
    }
  },

  // 三方插件的选项
  pluginOptions: {
    // ...
  }
}

配置文件去哪了?

由下图可看出 vue-cli-service 就是配置文件,那么它在哪里呢?
clipboard.png

然后 我就找到了这个~
(没法贴图了,忘记sf的贴图有限制。。)

先贴一个重要的,之后代码都是这里的(删了上面的一个图,才贴成功。呜呜)

clipboard.png

vue-cli-service.js

#!/usr/bin/env node

const semver = require('semver')
const { error } = require('@vue/cli-shared-utils')
const requiredVersion = require('../package.json').engines.node

if (!semver.satisfies(process.version, requiredVersion)) {
  error(
    `You are using Node ${process.version}, but vue-cli-service ` +
    `requires Node ${requiredVersion}.\nPlease upgrade your Node version.`
  )
  process.exit(1)
}

const Service = require('../lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())

const rawArgv = process.argv.slice(2)
const args = require('minimist')(rawArgv)
const command = args._[0]

service.run(command, args, rawArgv).catch(err => {
  error(err)
  process.exit(1)
})

然后顺藤摸瓜,来看看这个~
Service.js

在这个文件里找到run方法 再往下一点 看到了 vue.config.js
等等~这不就是文档说的我们的配置文件吗~
哈哈哈~这就算是完全找到了吧~

很多代码↑
  loadUserOptions (inlineOptions) {
    // vue.config.js
    let fileConfig, pkgConfig, resolved, resovledFrom
    const configPath = (
      process.env.VUE_CLI_SERVICE_CONFIG_PATH ||
      path.resolve(this.context, 'vue.config.js')
    )
    if (fs.existsSync(configPath)) {
      try {
        fileConfig = require(configPath)
        if (!fileConfig || typeof fileConfig !== 'object') {
          error(
            `Error loading ${chalk.bold('vue.config.js')}: should export an object.`
          )
          fileConfig = null
        }
      } catch (e) {
        error(`Error loading ${chalk.bold('vue.config.js')}:`)
        throw e
      }
    }
很多代码↓    

关于vue-cli3.0体验的感想

早些年,安卓2.2的时候,热衷于刷机,尝试各种rom修改版
现在rom都优化的很好,都是拿来直接用
除非必要,已经没有多少人热衷刷机了

对于0配置,也是如此
已经配置好的部分放在里面,外面简洁方便大多数人使用
当你想使用自己的配置时,也可以很方便的修改

降低学习成本增加易用性才是王道啊~

查看原文

冰星寒水 赞了文章 · 2018-04-02

vue-cli3.0初体验~

之前因为parcel的出现,webpack也跟进了零配置
vue-cli自然也不能落下,cli3.0也升级到webpack4,并增加许多新特性

安装并创建一个项目

支持npm和yarn

npm install -g @vue/cli
# or
yarn global add @vue/cli
# 使用vue命令,创建项目(不同于cli2.0的init,create)
vue create my-project

cli3.0开始支持选项了,觉得对命令行不熟悉的朋友们更友好了~
本来只有2个预选项的(default和manually),我之前创建并保存了一个full

clipboard.png

所以我们主要看一下 manually(default包含在manually里)

首先是特性选择

clipboard.png

然后是每个特性的配置文件存放方式(我选了都放在一起~)

clipboard.png

最后问你 是否 保存为预设选项

clipboard.png

其实 里面 还有别的询问 都是大同小异 问你,在选过你用npm还是yarn安装后就不再问了(之后可以在.vuerc文件内修改,cd~能看到)会直接帮你创建项目

clipboard.png

之后运行npm run serve就好了(也不是以前的 npm run dev了)

clipboard.png

然后打印出前台页面地址和后台服务器地址 会自动打开网页

clipboard.png

配置你的项目

虽说是0配置,其实是把某些可以统一的配置项帮使用者配置好了。
当然默认配置也是可以更改的。

初始目录

我这个是什么特性也没有选的~
(上面选manually只是看看而已~并没有选择任何特性~hhh)
应该说是最精简的目录了~
相比cli2.0的目录,看起来更清爽~

clipboard.png

public相当于原来的static,里面的index.html是项目的入口
src同以前

cli3.0没有build和config了,
想要配置的话,需要在项目根目录下创建vue.config.js文件
(官方文档这么说哒~)
关于详细的配置信息,在此放一份 官方说明 供大家参考~

module.exports = {
  // 项目部署的基础路径
  // 我们默认假设你的应用将会部署在域名的根部,
  // 比如 https://www.my-app.com/
  // 如果你的应用时部署在一个子路径下,那么你需要在这里
  // 指定子路径。比如,如果你的应用部署在
  // https://www.foobar.com/my-app/
  // 那么将这个值改为 `/my-app/`
  baseUrl: '/',

  // 将构建好的文件输出到哪里
  outputDir: 'dist',

  // 是否在保存的时候使用 `eslint-loader` 进行检查。
  // 有效的值:`ture` | `false` | `"error"`
  // 当设置为 `"error"` 时,检查出的错误会触发编译失败。
  lintOnSave: true,

  // 使用带有浏览器内编译器的完整构建版本
  // 查阅 https://cn.vuejs.org/v2/guide/installation.html#运行时-编译器-vs-只包含运行时
  compiler: false,

  // 调整内部的 webpack 配置。
  // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
  chainWebpack: () => {},
  configureWebpack: () => {},

  // vue-loader 选项
  // 查阅 https://vue-loader.vuejs.org/zh-cn/options.html
  vueLoader: {},

  // 是否为生产环境构建生成 source map?
  productionSourceMap: true,

  // CSS 相关选项
  css: {
    // 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中)
    extract: true,

    // 是否开启 CSS source map?
    sourceMap: false,

    // 为预处理器的 loader 传递自定义选项。比如传递给
    // sass-loader 时,使用 `{ sass: { ... } }`。
    loaderOptions: {},

    // 为所有的 CSS 及其预处理文件开启 CSS Modules。
    // 这个选项不会影响 `*.vue` 文件。
    modules: false
  },

  // 在生产环境下为 Babel 和 TypeScript 使用 `thread-loader`
  // 在多核机器下会默认开启。
  parallel: require('os').cpus().length > 1,

  // 是否使用 `autoDLLPlugin` 分割供应的包?
  // 也可以是一个在 DLL 包中引入的依赖的显性的数组。
  // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#dll-模式
  dll: false,

  // PWA 插件的选项。
  // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli-plugin-pwa/README.md
  pwa: {},

  // 配置 webpack-dev-server 行为。
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理
    proxy: null, // string | Object
    before: app => {
      // `app` 是一个 express 实例
    }
  },

  // 三方插件的选项
  pluginOptions: {
    // ...
  }
}

配置文件去哪了?

由下图可看出 vue-cli-service 就是配置文件,那么它在哪里呢?
clipboard.png

然后 我就找到了这个~
(没法贴图了,忘记sf的贴图有限制。。)

先贴一个重要的,之后代码都是这里的(删了上面的一个图,才贴成功。呜呜)

clipboard.png

vue-cli-service.js

#!/usr/bin/env node

const semver = require('semver')
const { error } = require('@vue/cli-shared-utils')
const requiredVersion = require('../package.json').engines.node

if (!semver.satisfies(process.version, requiredVersion)) {
  error(
    `You are using Node ${process.version}, but vue-cli-service ` +
    `requires Node ${requiredVersion}.\nPlease upgrade your Node version.`
  )
  process.exit(1)
}

const Service = require('../lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())

const rawArgv = process.argv.slice(2)
const args = require('minimist')(rawArgv)
const command = args._[0]

service.run(command, args, rawArgv).catch(err => {
  error(err)
  process.exit(1)
})

然后顺藤摸瓜,来看看这个~
Service.js

在这个文件里找到run方法 再往下一点 看到了 vue.config.js
等等~这不就是文档说的我们的配置文件吗~
哈哈哈~这就算是完全找到了吧~

很多代码↑
  loadUserOptions (inlineOptions) {
    // vue.config.js
    let fileConfig, pkgConfig, resolved, resovledFrom
    const configPath = (
      process.env.VUE_CLI_SERVICE_CONFIG_PATH ||
      path.resolve(this.context, 'vue.config.js')
    )
    if (fs.existsSync(configPath)) {
      try {
        fileConfig = require(configPath)
        if (!fileConfig || typeof fileConfig !== 'object') {
          error(
            `Error loading ${chalk.bold('vue.config.js')}: should export an object.`
          )
          fileConfig = null
        }
      } catch (e) {
        error(`Error loading ${chalk.bold('vue.config.js')}:`)
        throw e
      }
    }
很多代码↓    

关于vue-cli3.0体验的感想

早些年,安卓2.2的时候,热衷于刷机,尝试各种rom修改版
现在rom都优化的很好,都是拿来直接用
除非必要,已经没有多少人热衷刷机了

对于0配置,也是如此
已经配置好的部分放在里面,外面简洁方便大多数人使用
当你想使用自己的配置时,也可以很方便的修改

降低学习成本增加易用性才是王道啊~

查看原文

赞 49 收藏 46 评论 18

冰星寒水 赞了回答 · 2017-12-04

解决webapp js倒计时问题

与手机系统时间进行比较;
如果还不放心,在app 打开的时候与后端的系统时间进行比较。

关注 3 回答 2

冰星寒水 赞了文章 · 2017-11-13

Vue2 源码漫游(一)

Vue2 源码漫游(一)

描述:

Vue框架中的基本原理可能大家都基本了解了,但是还没有漫游一下源码。
所以,觉得还是有必要跑一下。
由于是代码漫游,所以大部分为关键性代码,以主线路和主要分支的代码为主,大部分理解都写在代码注释中。


一、代码主线

文件结构1-->4,代码执行顺序4-->1

clipboard.png

1.platforms/web/entry-runtime.js/index.js

web不同平台入口;

/* @flow */

import Vue from './runtime/index'

export default Vue

2.runtime/index.js

为Vue配置一些属性方法

/* @flow */

import Vue from 'core/index'
import config from 'core/config'
import { extend, noop } from 'shared/util'
import { mountComponent } from 'core/instance/lifecycle'
import { devtools, inBrowser, isChrome } from 'core/util/index'

import {
  query,
  mustUseProp,
  isReservedTag,
  isReservedAttr,
  getTagNamespace,
  isUnknownElement
} from 'web/util/index'

import { patch } from './patch'
import platformDirectives from './directives/index'
import platformComponents from './components/index'

// install platform specific utils
Vue.config.mustUseProp = mustUseProp
Vue.config.isReservedTag = isReservedTag
Vue.config.isReservedAttr = isReservedAttr
Vue.config.getTagNamespace = getTagNamespace
Vue.config.isUnknownElement = isUnknownElement

// install platform runtime directives & components
extend(Vue.options.directives, platformDirectives)
extend(Vue.options.components, platformComponents)

// install platform patch function
Vue.prototype.__patch__ = inBrowser ? patch : noop

// public mount method
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}

// devtools global hook
/* istanbul ignore next */
Vue.nextTick(() => {
  if (config.devtools) {
    if (devtools) {
      devtools.emit('init', Vue)
    } else if (process.env.NODE_ENV !== 'production' && isChrome) {
      console[console.info ? 'info' : 'log'](
        'Download the Vue Devtools extension for a better development experience:\n' +
        'https://github.com/vuejs/vue-devtools'
      )
    }
  }
  if (process.env.NODE_ENV !== 'production' &&
    config.productionTip !== false &&
    inBrowser && typeof console !== 'undefined'
  ) {
    console[console.info ? 'info' : 'log'](
      `You are running Vue in development mode.\n` +
      `Make sure to turn on production mode when deploying for production.\n` +
      `See more tips at https://vuejs.org/guide/deployment.html`
    )
  }
}, 0)

export default Vue

3.core/index.js

clipboard.png

/* @flow */

import config from '../config'
import { initUse } from './use'
import { initMixin } from './mixin'
import { initExtend } from './extend'
import { initAssetRegisters } from './assets'
import { set, del } from '../observer/index'
import { ASSET_TYPES } from 'shared/constants'
import builtInComponents from '../components/index'

import {
  warn,
  extend,
  nextTick,
  mergeOptions,
  defineReactive
} from '../util/index'

export function initGlobalAPI (Vue: GlobalAPI) {
  // 重写config,创建了一个configDef对象,最终目的是为了Object.defineProperty(Vue, 'config', configDef)
  const configDef = {}
  configDef.get = () => config
  if (process.env.NODE_ENV !== 'production') {
    configDef.set = () => {
      warn(
        'Do not replace the Vue.config object, set individual fields instead.'
      )
    }
  }
  Object.defineProperty(Vue, 'config', configDef)
  // 具体Vue.congfig的具体内容就要看../config文件了

  // exposed util methods.
  // NOTE: these are not considered part of the public API - avoid relying on them unless you are aware of the risk.
  // 添加一些方法,但是该方法并不是公共API的一部分。源码中引入了flow.js
  Vue.util = {
    warn, // 查看'../util/debug'
    extend,//查看'../sharde/util'
    mergeOptions,//查看'../util/options'
    defineReactive//查看'../observe/index'
  }

  Vue.set = set //查看'../observe/index' 
  Vue.delete = del//查看'../observe/index'
  Vue.nextTick = nextTick//查看'../util/next-click'.在callbacks中注册回调函数

  // 创建一个纯净的options对象,添加components、directives、filters属性
  Vue.options = Object.create(null)
  ASSET_TYPES.forEach(type => {
    Vue.options[type + 's'] = Object.create(null)
  })
  

  // this is used to identify the "base" constructor to extend all plain-object
  // components with in Weex's multi-instance scenarios.
  Vue.options._base = Vue

  // ../components/keep-alive.js  拷贝组件对象。该部分最重要的一部分。
  extend(Vue.options.components, builtInComponents)
  // Vue.options = {
  //   components : {
  //     KeepAlive : {
  //       name : 'keep-alive',
  //       abstract : true,
  //       created : function created(){},
  //       destoryed : function destoryed(){},
  //       props : {
  //         exclude : [String, RegExp, Array],
  //         includen : [String, RegExp, Array],
  //         max : [String, Number]
  //       },
  //       render : function render(){},
  //       watch : {
  //         exclude : function exclude(){},
  //         includen : function includen(){},
  //       }
  //     },
  //     directives : {},
  //     filters : {},
  //     _base : Vue
  //   }
  // }
  // 添加Vue.use方法,使用插件,内部维护一个插件列表_installedPlugins,如果插件有install方法就执行自己的install方法,否则如果plugin是一个function就执行这个方法,传参(this, args)
  initUse(Vue)
  // ./mixin.js 添加Vue.mixin方法,this.options = mergeOptions(this.options, mixin),
  initMixin(Vue)
  // ./extend.js 添加Vue.cid(每一个够着函数实例都有一个cid,方便缓存),Vue.extend(options)方法
  initExtend(Vue)
  // ./assets.js 创建收集方法Vue[type] = function (id: string, definition: Function | Object),其中type : component / directive / filter
  initAssetRegisters(Vue)
}

Vue.util对象的部分解释:

    • Vue.util.warn
      warn(msg, vm) 警告方法代码在util/debug.js,
      通过var trac = generateComponentTrace(vm)方法vm=vm.$parent递归收集到msg出处。
      然后判断是否存在console对象,如果有 console.error([Vue warn]: ${msg}${trace})。
      如果config.warnHandle存在config.warnHandler.call(null, msg, vm, trace)

    • Vue.util.extend

          extend (to: Object, _from: ?Object):Object Object类型浅拷贝方法代码在shared/util.js
    • Vue.util.mergeOptions

         合并,vue实例化和实现继承的核心方法,代码在shared/options.js
          mergeOptions (
           parent: Object,
           child: Object,
           vm?: Component
         ) 
         先通过normalizeProps、normalizeInject、normalizeDirectives以Object-base标准化,然后依据strats合并策略进行合并。
         strats是对data、props、watch、methods等实例化参数的合并策略。除此之外还有defaultStrat默认策略。
         后期暴露的mixin和Vue.extend()就是从这里出来的。[官网解释][1]
    • Vue.util.defineReactive

         大家都知道的数据劫持核心方法,代码在shared/util.js
          defineReactive (
           obj: Object,
           key: string,
           val: any,
           customSetter?: ?Function,
           shallow?: boolean
         ) 
      

    4.instance/index.js Vue对象生成文件

    import { initMixin } from './init'
    import { stateMixin } from './state'
    import { renderMixin } from './render'
    import { eventsMixin } from './events'
    import { lifecycleMixin } from './lifecycle'
    import { warn } from '../util/index'
    
    function Vue (options) {
      // 判断是否是new调用。
      if (process.env.NODE_ENV !== 'production' &&
        !(this instanceof Vue)
      ) {
        warn('Vue is a constructor and should be called with the `new` keyword')
      }
      // 开始初始化
      this._init(options)
    }
    // 添加Vue._init(options)内部方法,./init.js
    initMixin(Vue)
    /**
     * ./state.js
     * 添加属性和方法
     * Vue.prototype.$data 
     * Vue.prototype.$props
     * Vue.prototype.$watch
     * Vue.prototype.$set
     * Vue.prototype.$delete
     */ 
    stateMixin(Vue)
    /**
     * ./event.js
     * 添加实例事件
     * Vue.prototype.$on
     * Vue.prototype.$once
     * Vue.prototype.$off
     * Vue.prototype.$emit
     */ 
    eventsMixin(Vue)
    /**
     * ./lifecycle.js
     * 添加实例生命周期方法
     * Vue.prototype._update
     * Vue.prototype.$forceUpdate
     * Vue.prototype.$destroy
     */ 
    lifecycleMixin(Vue)
    /**
     * ./render.js
     * 添加实例渲染方法
     * 通过执行installRenderHelpers(Vue.prototype);为实例添加很多helper
     * Vue.prototype.$nextTick
     * Vue.prototype._render
     */ 
    renderMixin(Vue)
    
    export default Vue
    

    5.instance/init.js

    初始化,完成主组件的所有动作的主线。从这儿出发可以理清observer、watcher、compiler 、render等

    import config from '../config'
    import { initProxy } from './proxy'
    import { initState } from './state'
    import { initRender } from './render'
    import { initEvents } from './events'
    import { mark, measure } from '../util/perf'
    import { initLifecycle, callHook } from './lifecycle'
    import { initProvide, initInjections } from './inject'
    import { extend, mergeOptions, formatComponentName } from '../util/index'
    
    let uid = 0
    
    export function initMixin (Vue: Class<Component>) {
      Vue.prototype._init = function (options?: Object) {
        const vm: Component = this
        // a uid
        vm._uid = uid++
    
        let startTag, endTag
        /* istanbul ignore if */
        if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
          startTag = `vue-perf-start:${vm._uid}`
          endTag = `vue-perf-end:${vm._uid}`
          mark(startTag)
        }
    
        // a flag to avoid this being observed
        vm._isVue = true
        // merge options
        if (options && options._isComponent) {
          // optimize internal component instantiation
          // since dynamic options merging is pretty slow, and none of the
          // internal component options needs special treatment.
          initInternalComponent(vm, options)
        } else {
          vm.$options = mergeOptions(
            resolveConstructorOptions(vm.constructor),
            options || {},
            vm
          )
        }
        /* istanbul ignore else */
        if (process.env.NODE_ENV !== 'production') {
          initProxy(vm)
        } else {
          vm._renderProxy = vm
        }
        // expose real self
        vm._self = vm
        initLifecycle(vm)
        initEvents(vm)
        /**
        * 添加vm.$createElement vm.$vnode vm.$slots vm.
        * 创建vm.$attrs  /  vm.$listeners 并且转换为getter和setter
        * 
        */
        initRender(vm)
        callHook(vm, 'beforeCreate')
        initInjections(vm) // resolve injections before data/props vm.$scopedSlots 
        /**
        * 1、创建 vm._watchers = [];
        * 2、执行if (opts.props) { initProps(vm, opts.props); } 验证props后调用defineReactive转化,并且代理数据proxy(vm, "_props", key);
        * 3、执行if (opts.methods) { initMethods(vm, opts.methods); } 然后vm[key] = methods[key] == null ? noop : bind(methods[key], vm);
        * 4、处理data,
        * if (opts.data) {
        *    initData(vm);
        * } else {
        *    observe(vm._data = {}, true /* asRootData */);
        * }
        * 5、执行initData:
        *       (1)先判断data的属性是否有与methods和props值同名
        *       (2)获取vm.data(如果为function,执行getData(data, vm)),代理proxy(vm, "_data", key);
        *       (3)执行 observe(data, true /* asRootData */);递归观察
        * 6、完成observe,具体看解释
        */
        initState(vm)
        initProvide(vm) // resolve provide after data/props
        callHook(vm, 'created')
    
        /* istanbul ignore if */
        if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
          vm._name = formatComponentName(vm, false)
          mark(endTag)
          measure(`vue ${vm._name} init`, startTag, endTag)
        }
    
        if (vm.$options.el) {
          vm.$mount(vm.$options.el)
        }
      }
    }

    二、observe 响应式数据转换

    1.前置方法 observe(value, asRootData)

    function observe (value, asRootData) {
      // 如果value不是是Object 或者是VNode这不用转换
      if (!isObject(value) || value instanceof VNode) {
        return
      }
      var ob;
      // 如果已经转换就复用
      if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
        ob = value.__ob__;
      } else if (
        //一堆必要的条件判断
        observerState.shouldConvert &&
        !isServerRendering() &&
        (Array.isArray(value) || isPlainObject(value)) &&
        Object.isExtensible(value) &&
        !value._isVue
      ) {
        //这才是observe主体
        ob = new Observer(value);
      }
      if (asRootData && ob) {
        ob.vmCount++;
      }
      return ob
    }

    2.Observer 类

    var Observer = function Observer (value) {
      // 当asRootData = true时,其实可以将value当做vm.$options.data,后面都这样方便理解
      this.value = value;
      /**
      * 为vm.data创建一个dep实例,可以理解为一个专属事件列表维护对象
      * 例如: this.dep = { id : 156, subs : [] }
      * 实例方法: this.dep.__proto__ = { addSub, removeSub, depend, notify, constructor }
      */
      this.dep = new Dep();
      //记录关联的vm实例的数量
      this.vmCount = 0;
      //为vm.data 添加__ob__属性,值为当前observe实例,并且转化为响应式数据。所以看一个value是否为响应式就可以看他有没有__ob__属性
      def(value, '__ob__', this);
      //响应式数据转换分为数组、对象两种。
      if (Array.isArray(value)) {
        var augment = hasProto
          ? protoAugment
          : copyAugment;
        augment(value, arrayMethods, arrayKeys);
        this.observeArray(value);
      } else {
        //对象的转换,而且walk是Observer的实例方法,请记住
        this.walk(value);
      }
    };

    3.walk

    该方法要将vm.data的所有属性都转化为getter/setter模式,所以vm.data只能是Object。数组的转换不一样,这里暂不做讲解。

    Observer.prototype.walk = function walk (obj) {
      // 得到key的列表
      var keys = Object.keys(obj);
      for (var i = 0; i < keys.length; i++) {
        //核心方法:定义响应式数据的方法  defineReactive(对象, 属性, 值);这样看是不是就很爽了
        defineReactive(obj, keys[i], obj[keys[i]]);
      }
    };

    4.defineReactive(obj, key, value)

    function defineReactive (
      obj,
      key,
      val,
      customSetter, //自定义setter,为了测试
      shallow //是否只转换这一个属性后代不管控制参数,false :是,true : 否
    ) {
      /**
      * 又是一个dep实例,其实作用与observe中的dep功能一样,不同点:
      *     1.observe实例的dep对象是父级vm.data的订阅者维护对象
      *     2.这个dep是vm.data的属性key的订阅者维护对象,因为val有可能也是对象
      *     3.这里的dep没有写this.dep是因为defineReactive是一个方法,不是构造函数,所以使用闭包锁在内存中
      */
      var dep = new Dep();
      // 获取key的属性描述符
      var property = Object.getOwnPropertyDescriptor(obj, key);
      // 如果key属性不可设置,则退出该函数
      if (property && property.configurable === false) {
        return
      }
    
      // 为了配合那些已经的定义了getter/setter的情况
      var getter = property && property.get;
      var setter = property && property.set;
      
      //递归,因为没有传asRootData为true,所以vm.data的vmCount是部分计数的。因为它还是属于vm的数据
      var childOb = !shallow && observe(val);
      /**
      * 全部完成后observe也就完成了。但是,每个属性的dep都没启作用。
      * 这就是所谓的依赖收集了,后面继续。
      */
      Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: function reactiveGetter () {
          var value = getter ? getter.call(obj) : val;
          if (Dep.target) {
            dep.depend();
            if (childOb) {
              childOb.dep.depend();
              if (Array.isArray(value)) {
                dependArray(value);
              }
            }
          }
          return value
        },
        set: function reactiveSetter (newVal) {
          var value = getter ? getter.call(obj) : val;
          /* eslint-disable no-self-compare */
          if (newVal === value || (newVal !== newVal && value !== value)) {
            return
          }
          /* eslint-enable no-self-compare */
          if (process.env.NODE_ENV !== 'production' && customSetter) {
            customSetter();
          }
          if (setter) {
            setter.call(obj, newVal);
          } else {
            val = newVal;
          }
          childOb = !shallow && observe(newVal);
          dep.notify();
        }
      });
    }

    三、依赖收集

    一些个人理解:
        1、Watcher 订阅者
            可以将它理解为,要做什么。具体的体现就是Watcher的第二个参数expOrFn。
        2、Observer 观察者
            其实观察的体现就是getter/setter能够观察数据的变化(数组的实现不同)。
        3、dependency collection 依赖收集
            订阅者(Watcher)是干事情的,是一些指令、方法、表达式的执行形式。它运行的过程中肯定离不开数据,所以就成了这些数据的依赖项目。因为离不开^_^数据。
            数据是肯定会变的,那么数据变了就得通知数据的依赖项目(Watcher)让他们再执行一下。
            依赖同一个数据的依赖项目(Watcher)可能会很多,为了保证能够都通知到,所以需要收集一下。
        4、Dep 依赖收集器构造函数
            因为数据是由深度的,在不同的深度有不同的依赖,所以我们需要一个容器来装起来。
            Dep.target的作用是保证数据在收集依赖项(Watcher)时,watcher是对这个数据依赖的,然后一个个去收集的。

    1、Watcher

    Watcher (vm, expOrFn, cb, options)
    参数:
    {string | Function} expOrFn
    {Function | Object} callback
    {Object} [options]
        {boolean} deep
        {boolean} user
        {boolean} lazy
        {boolean} sync
    在Vue的整个生命周期当中,会有4类地方会实例化Watcher:
        Vue实例化的过程中有watch选项
        Vue实例化的过程中有computed计算属性选项
        Vue原型上有挂载$watch方法: Vue.prototype.$watch,可以直接通过实例调用this.$watch方法
        Vue生成了render函数,更新视图时
        
        Watcher接收的参数当中expOrFn定义了用以获取watcher的getter函数。expOrFn可以有2种类型:string或function.若为string类型,
    首先会通过parsePath方法去对string进行分割(仅支持.号形式的对象访问)。在除了computed选项外,其他几种实例化watcher的方式都
    是在实例化过程中完成求值及依赖的收集工作:this.value = this.lazy ? undefined : this.get().在Watcher的get方法中:
    var Watcher = function Watcher (
      vm,
      expOrFn,
      cb,
      options
    ) {
      this.vm = vm;
      vm._watchers.push(this);
      // options
      if (options) {
        this.deep = !!options.deep;
        this.user = !!options.user;
        this.lazy = !!options.lazy;
        this.sync = !!options.sync;
      } else {
        this.deep = this.user = this.lazy = this.sync = false;
      }
      //相关属性
      this.cb = cb;
      this.id = ++uid$2; // uid for batching
      this.active = true;
      this.dirty = this.lazy; // for lazy watchers
      //
      this.deps = [];
      this.newDeps = [];
      //set类型的ids
      this.depIds = new _Set();
      this.newDepIds = new _Set();
      // 表达式
      this.expression = process.env.NODE_ENV !== 'production'
        ? expOrFn.toString()
        : '';
      // 创建一个getter
      if (typeof expOrFn === 'function') {
        this.getter = expOrFn;
      } else {
        this.getter = parsePath(expOrFn);
        if (!this.getter) {
          this.getter = function () {};
          process.env.NODE_ENV !== 'production' && warn(
            "Failed watching path: \"" + expOrFn + "\" " +
            'Watcher only accepts simple dot-delimited paths. ' +
            'For full control, use a function instead.',
            vm
          );
        }
      }
      this.value = this.lazy
        ? undefined
        : this.get();//执行get收集依赖项
    };

    2、Watcher.prototype.get

    通过设置观察值(this.value)调用this.get方法,执行this.getter.call(vm, vm),这个过程中只要获取了某个响应式数据。那么肯定会触发该数据的getter方法。因为当前的Dep.target = watcher。所以就将该watcher作为了这个响应数据的依赖项。因为watcher在执行过程中的确需要、使用了它、所以依赖它。

    Watcher.prototype.get = function get () {
      //将这个watcher观察者实例添加到Dep.target,表明当前为this.expressoin的依赖收集时间
      pushTarget(this);
      var value;
      var vm = this.vm;
      try {
        /**
        * 执行this.getter.call(vm, vm):
        *     1、如果是function则相当于vm.expOrFn(vm),只要在这个方法执行的过程中有从vm上获取属性值的都会触发该属性值的get方法从而完成依赖收集。因为现在Dep.target=this. 
        *     2、如果是字符串(如a.b),那么this.getter.call(vm, vm)就相当于vm.a.b
        */ 
        value = this.getter.call(vm, vm);
      } catch (e) {
        if (this.user) {
          handleError(e, vm, ("getter for watcher \"" + (this.expression) + "\""));
        } else {
          throw e
        }
      } finally {
        // "touch" every property so they are all tracked as
        // dependencies for deep watching
        if (this.deep) {
          traverse(value);
        }
        popTarget();
        this.cleanupDeps();
      }
      return value
    };

    3、getter/setter

    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: function reactiveGetter () {
          var value = getter ? getter.call(obj) : val;
          if (Dep.target) {
            //依赖收集,这里又饶了一圈,看后面的解释
            dep.depend();
            if (childOb) {
              childOb.dep.depend();
              if (Array.isArray(value)) {
                dependArray(value);
              }
            }
          }
          return value
        },
        set: function reactiveSetter (newVal) {
          var value = getter ? getter.call(obj) : val;
          /* eslint-disable no-self-compare */
          if (newVal === value || (newVal !== newVal && value !== value)) {
            return
          }
          /* eslint-enable no-self-compare */
          if (process.env.NODE_ENV !== 'production' && customSetter) {
            customSetter();
          }
          if (setter) {
            setter.call(obj, newVal);
          } else {
            val = newVal;
          }
          childOb = !shallow && observe(newVal);
          //数据变动出发所有依赖项
          dep.notify();
        }
      });

    - 依赖收集具体动作:

    //调用的自己dep的实例方法
    Dep.prototype.depend = function depend () {
      if (Dep.target) {
        //调用的是当前Watcher实例的addDe方法,并且把dep对象传过去了
        Dep.target.addDep(this);
      }
    };
    
    Watcher.prototype.addDep = function addDep (dep) {
      var id = dep.id;
      if (!this.newDepIds.has(id)) {
        //为这个watcher统计内部依赖了多少个数据,以及其他公用该数据的watcher
        this.newDepIds.add(id);
        this.newDeps.push(dep);
        if (!this.depIds.has(id)) {
          //继续为数据收集依赖项目的步骤
          dep.addSub(this);
        }
      }
    };
    Dep.prototype.addSub = function addSub (sub) {
      this.subs.push(sub);
    };

    - 数据变动出发依赖动作:

    Dep.prototype.notify = function notify () {
      // stabilize the subscriber list first
      var subs = this.subs.slice();
      for (var i = 0, l = subs.length; i < l; i++) {
        subs[i].update();
      }
    };
    //对当前watcher的处理
    Watcher.prototype.update = function update () {
      /* istanbul ignore else */
      if (this.lazy) {
        this.dirty = true;
      } else if (this.sync) {
        this.run();
      } else {
        queueWatcher(this);
      }
    };
    //把一个观察者推入观察者队列。
    //具有重复id的作业将被跳过,除非它是
    //当队列被刷新时被推。
    export function queueWatcher (watcher: Watcher) {
      const id = watcher.id
      if (has[id] == null) {
        has[id] = true
        if (!flushing) {
          queue.push(watcher)
        } else {
          // if already flushing, splice the watcher based on its id
          // if already past its id, it will be run next immediately.
          let i = queue.length - 1
          while (i > index && queue[i].id > watcher.id) {
            i--
          }
          queue.splice(i + 1, 0, watcher)
        }
        // queue the flush
        if (!waiting) {
          waiting = true
          nextTick(flushSchedulerQueue)
        }
      }
    }
    
    查看原文

    赞 3 收藏 12 评论 0

    冰星寒水 发布了文章 · 2017-07-08

    利用win10 bash + cmder 搭建最顺手的前端开发环境

    背景

    最近一家公司在使用mac做为开发机,的确使用nodejs以及相关生态非常爽,家中的联想笔记本就明显不太方便了,装黑苹果又带不起来,听说win10上面自带的bash还可以,就启用了玩玩。发现非常好用,没有任何不适感,感觉我省下了一个macbook pro~~

    启用

    1.启用 设置- 更新和安全-针对开发者人员-选择开发者模式

    更新和安全.png

    2.适用于Linux的windows子系统

    程序和功能.png
    3.选择启动或关闭windows功能,找到适用于Linux的windows子系统

    适用于Linux的windows子系统.png
    4.搜索bash-安装 根据提示安装,从windows商店时间比较长

    image.png

    1. 安装成功 根据提示输入linux用户名和密码

    2. 可以搜索到 bash on ubuntu on windows,启用成功,这个bash现在非常牛逼,已经内置node.js 7.9 和nvm了,还有其他的内置软件我还没有研究~

    image.png

    卸载

    删除软件和设置:在 cmd 运行 lxrun /uninstall
    删除所有文件:在 cmd 运行 lxrun /uninstall /full
    然后再在控制面板删除。
    来源:how-to-uninstall-or-reinstall-windows-10s-ubuntu-bash-shell

    配置

    由于自带的终端实在不顺手,于是我使用cmder来使用终端
    链接:cmder
    下载 完整版

    配置
    `
    %windir%system32bash.exe ~ -cur_console:p:n
    `
    image.png

    取消选择Monospace
    image.png
    配置完成后就可以打开了
    点击绿色加号打开一个新的bash窗口
    image.png

    image.png

    实际应用

    windows的文件全部挂在Linux 的/mnt然后你就可以使用一个alias code="cd /mnt/d/code"到你的代码目录,然后你就可以在终端进行`npm
    nodejs`等操作,而编辑代码还是在windows机器上,感觉非常舒服~

    原文地址

    查看原文

    赞 3 收藏 5 评论 0

    冰星寒水 回答了问题 · 2017-07-06

    bootcdn这种实时搜索出结果怎么实现?

    监听输入框的input事件,每次输入字符都去筛选一下数据,它的数据在渲染页面的时候都存到前台了没有与后台交互

    关注 2 回答 1

    冰星寒水 赞了回答 · 2017-06-18

    这段代码一直生效不了,查半天因为 top: 0px; 分号后一个隐藏的东西,也不是占位符...删了就可以生效,这是什么情况。。

    你发的代码直接复制的话是看不到这个字符的,但是从你的标题里,我复制出这个字符,发现是控制字符DLE。

    数据链路转义(DLE)告诉数据链路的另一端结束一个会话。

    因此,在CSS中,DLE字符可能会导致CSS在解析完毕之前中断。

    关注 4 回答 4

    冰星寒水 赞了回答 · 2017-06-16

    vue 单页面内存不断增加,最后就爆了

    比较容易想到的情况是 echarts 实例没有正确销毁。可以通过 dev tool 中的 memory 功能来分析内存消耗情况。

    关注 11 回答 9

    认证与成就

    • 获得 65 次点赞
    • 获得 25 枚徽章 获得 1 枚金徽章, 获得 6 枚银徽章, 获得 18 枚铜徽章

    擅长技能
    编辑

    开源项目 & 著作
    编辑

    (゚∀゚ )
    暂时没有

    注册于 2015-07-02
    个人主页被 1.3k 人浏览