Vue笔记

js 有很多加载器

• requirejs AMD
• nodejs require() commonjs
• es6 出了 import
• alibaba 出了 CMD 国外没人用

你不知道 你的代码 运行在哪一种环境下面 这个时候 你就需要用 UMD

UMD 就是可以自适应 前面三种 加载方式 那种方法可行 就用那种方法

vue完整版 = 编译器 + 运行时 版本

双向绑定

js的变化 同步到 DOM
DOM的变化 同步到 js

user.name的变化 同步到 inpu
input的变化 同步到 user.name

双向绑定 的问题

你的数据 可能在 任何一个时间 被任何人 改 改的时候 不会通知你

墨菲定律 ----- 小概率事件 必然发生

双向绑定 在没有同级元素 互相篡改的时候 是ok的
一旦出现了多个 改变数据的源 你就会觉得 数据不可控了
怎么办呢

单向数据流 ----- 一个数据只能 由一个人改

谁拥有这个数据 谁才能改这个数据

好处

数据拥有者 清晰的知道 数据什么时候 变化 以及 为什么变化 可以任意的 控制 变化的时机

数据拥有者 可以阻止数据变化

双向绑定监听 是后面的监听
单向绑定 是 拦截

避免直接修改prop 数据

Vue 是先把 儿子造出来 然后放到爸爸里面 然后把爸爸渲染出来
然后 把爸爸放到爷爷里面 然后把爷爷放到页面里面

儿子 -> 爸爸 -> 爷爷

我们把值传给 爸爸的时候 爸爸已经渲染了

Vue里面冒泡要手动去做

儿子的事件 只能 儿子接受 事件是不会 冒泡的

Vue的组件的name 用来区分组件

如果你不能拿到这个元素的话 你可能需要遍历children 来绑定事件

Vue的所有事件 都只能在 自身 上面触发

Vue没有事件冒泡 一个元素的事件 只能在这个元素身上 自己监听自己

如果你要冒泡呢 如果你的儿子 某个子元素 触发了事件 你就要自己在自己身上 触发一次
你的爸爸 在监听到你的触发之后 你爸爸身上再触发一次 最后触发到用户身上
这就是一个 模拟的事件冒泡

mounted的顺序

我们写的顺序是 爷爷->爸爸->儿子
但是 mount 的顺序 确实 儿子-> 爸爸-> 爷爷
为什么会这样呢
因为 只有儿子准备好了 才能把爸爸放到页面里啊
如果 儿子还没准备好 我就放爸爸的话 这个时候 爸爸不是残缺的嘛
这个不是出生的顺序 而是 把他展示出来的顺序
mount 是什么时候 把你 Vue 的组件 展示到页面里
等这个页面的儿子都展示好了 都在内存里面初始化好了
然后再 mount 当前这个元素
最终 所有的组件都 mount 好了
再把整个app mount到页面app上面 所以是反着的

updated

为什么会用到updated呢
你去设置选中的时候 只是在mount的时候做了
万一你后面又更新了怎么办呢
你就要用updated 这个钩子
什么时候用updated 这个钩子呢
因为 Vue在大部分时候 爸爸会自动更新儿子
儿子会自动更新儿子的儿子
一直往下更新 不需要你手动处理
但是出现这种情况 你就需要手动处理了
因为你没办法把你的属性直接绑到你儿子身上
因为你都不知道你儿子是谁
所以每次更新 都需要调用一下儿子
未来不知道是谁 的儿子 请更新下你的属性

app 是不能直接放到body上的
你需要一个单独的div上放

爸爸需要遍历儿子 添加 事件监听

mounted(){
    this.$children.forEach((vm)=>{
        if(vm.$options.name === 'tabs-navs-item'){
            this.$on('update:selectedTab',(e)=>{
                ...
            })
        }
    })
}


<div class="box" ref=div5></div>

mounted(){
    let div5 = this.$refs.div5
    div5.style.background = "red"

}

watch、computed、methods

• watch 必须要有一个东西来承接 你的数值 data里面定义一个空值

• computed 里的方法调用 不需要括号() 方法可以之间变为一个值
  message(){} -> message
  message 依赖的变量变了 并且在页面渲染 就会执行

• methods 里的方法调用 需要加括号() 方法...
  只要你调 它就会调用

• watch 执行一个动作 只在 x 变化的时候 触发 跟踪属性的变化

• computed 执行一个动作 并把一个值付给message message 在页面上渲染 同时 x被调用 跟踪属性的变化 跟踪你有没有 渲染过message

• methods 执行一个动作 只在你调用 getmessage()的时候 触发 跟踪你有没有渲染过 我自己

computed = watch + methods

////////

var obj = {text: 1}

Object.freeze(obj)