摸鱼时间---阅读vue文档(一)

vue响应式、双向数据绑定、prop&data属性命名

  • vue在响应式原理解释中提到:Object.defineProperty 是 ES5 中一个没法 shim 的特性,这也就是 Vue 不支持 IE8 以及更低版本浏览器的缘由。
  • ES5中的shim特性指的是,让一些低版本的浏览器支持ECMAScript5的一些新特性
  • 简单叙述vue响应式原理:(完成数据驱动视图)
    • vue 递归遍历 data 中的数据,并使用 Object.defineProperty 方法将遍历出的属性转换为getter/setter(getter在调用属性时触发,setter在属性值修改时触发),每一个组件都有一个 wacther 实例,他会将在渲染中“接触”过的属性记录为依赖,经过 setter 监听预示 wacther 从新渲染
    • 检测数据变化注意点:因为 vue 在初始化 data 时,将 data 中的属性转换为 getter/setter ,因此属性必须在 data 中才有响应式特性,这意味着已经建立的实例不容许再次添加根级别的属性,由于它是没有响应特性的,咱们能够经过 Vue.set()/this.$set() 添加根级别属性
  • v-model 在响应式上添加了 oninput 事件,二者结合实现数据双向绑定。(实现视图驱动数据)
  • HTML 中的特性名是大小写不敏感的,因此浏览器会把全部大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名须要使用其等价的 kebab-case (短横线分隔命名) 命名。---在prop中的属性名尽可能不要带大写
  • _$ 开头的属性 不会 被 Vue 实例代理,由于它们可能和 Vue 内置的属性、API 方法冲突。你能够使用例如 vm.$data._property 的方式访问这些属性。---data 中的属性名尽可能不要以 _$开头,vue 实例不会代理
相关文章
相关标签/搜索