VUE 笔记

vue 是用于构建用户界面的渐进式框架

当一个 vue 实例被创建的时候 它将 data 对象的所有实例传递到 vue 响应式系统中 这些属性的值发生改变的时候 视图会对应做出响应 这些数据改变的时候视图才会发生响应  只有当实例被创建时就存在在 data 的数据才是响应式的 但是 Object.freeze() 是例外 它会阻止修改现有的属性 系统不能追踪变化

var obj = {
  name: 'zlrrr'  
}

Object.freeze(obj)

var vm = new Vue({
    el: "#app",
   data: obj
})

<div id="app">
    <p>{{name}}</p>
    <button v-on:click='name = "Zlrrr" '>Change</button>
</div>

 vue 的生命周期

每个 vue 实例在创建过程中都要经过一系列初始化过程 比如要数据监听 编译模板 将实例挂载到 DOM 并在数据更新的时候更新 DOM 在这个过程中还会运行生命周期钩子的函数 在不同的阶段给了用户添加代码的机会

 

 

vue 的指令

vue 的指令是带有 v- 的特殊的 attribute 它的预期值是单个的 JS 表达式 （v-for） 例外

指令的职责是当表达式的值改变时 将其产生的连带影响 响应式的作用于 DOM 

v-bind 缩写 ':' v-on 缩写 '@'

vue 的计算属性

计算属性是基于他们的响应式依赖进行缓存的 只有相关依赖发生改变的时候才会重新求值 否则仍是上次运算的结果

vue  的 key :可以使两个元素独立 不去复用它们 只要它们是两个不同的 key 属性

由于 JS 的限制 vue 不能根据数组索引直接创建数组项 或者直接赋值更改数组长度 这样是不生效的 要用 set 也是由于 JS 的限制  vue 不能检测对象属性的增加与删除 对于已创建的实例 vue 不允许动态添加根级别的响应式属性 但是可以用 vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性

 

var vm = new Vue({
    el: "#app",
    data: {
        user: {
            a: 1
        }
    }
})

vm.user = Object.assign({}, vm.user, {
    b: 2,
    c: 3
})

 

v-on 的优点：当一个 ViewModel 被销毁的时候 所有的事件处理器都会被销毁；

v-model 负责监听用户的输入事件以及更新数据 对一些极端场景进行处理