个人自学前端25-Vue2-created，数据劫持，计算属性computed，侦测属性watch，过滤器filters，自定义指令directives

目录

一.Created

用于给data的数据进行初始化的.
程序运行,created会默认触发一次.
created => 生命周期钩子函数.

二.数据劫持

当我们访问或设置对象的属性的时候，都会触发相对应的函数，然后在这个函数里返回或设置属性的值。在触发函数的时候动一些手脚做点我们自己想做的事情，这也就是“劫持”操作。
Vue中其实就是通过Object.defineProperty来劫持对象属性的setter和getter操作，并“种下”一个监听器，当数据发生变化的时候发出通知。

  • 如何给一个一开始不存在的属性添加数据劫持？
  • 1:手动用$set添加.
  • 2:通过修改这个属性所在的对象(把它变成新的对象).

1.js对象的属性

js对象的属性都有4种描述
1:是否可以修改 writable: true
2:是否可以删除 configurable: true
3:是否可以枚举 enumerable: true => 是否可以for in 检测
4:值是什么 value

  <script>
    const oYm = {
      name: '幂幂'
    }
    // 获取oYm对象的name属性的4中描述
    const desc = Object.getOwnPropertyDescriptor(oYm, 'name');
    console.log(desc);
    // 修改oYm的name属性的描述.
    Object.defineProperty(oYm, 'name', {
      value: '超越',
      enumerable: false
    });
  </script>

2.defineProperty

defineProperty是Vue的数据驱动的底层核心方法.
当一个监听的数据发生变化时,可以通过视图更新.(DOM操作)

如何监听一个数据,能捕获到这个数据的变化呢?
用defineProperty来设置监听

  <script>
    const data = { msg: 100 };
    const [oDiv] = document.querySelectorAll('div');
    let val = data.msg;
    // 设置了set和get方法的属性,它的值,只能通过get返回.
    Object.defineProperty(data, 'msg', {
      // msg被访问时触发
      get() {
        console.log('msg被访问');
        return val
      },
      // msg被修改时触发(可以在这里做DOM操作)
      // 参数就是新修改的值.
      set(newVal) {
        val = newVal;
        console.log('msg被修改');
        oDiv.innerText = newVal;
      }
    });
  </script>

3.set方法

<body>
  <div id='app'>
    <button @click='fn'>按钮</button>
    <div>{{obj.name}}</div>
  </div>
  <script src="js/vue.js"></script>
  <script>
    // obj没有name属性,因此实例化时,没办法给这个name属性设置监听.
    // 因此后续对name的修改,视图不会更新.
    const vm = new Vue({
      el: '#app',
      data: {
        obj:{}
      },
      methods: {
        fn() {
          // 新增属性name.(不算修改)
          // this.obj.name = 1000;
          // 如何在新增一个属性的同时去给它添加数据劫持?
          // 用实例方法添加初始值和数据劫持
          // this.$set(this.obj, 'name', 1000);
          // 通过Vue的静态方法添加.
          // Vue.set(this.obj, 'name', 1000);
          // 访问实例的默认属性data.
          // console.log(this.$data);
        }
      }
    })
  </script>
</body>

三.计算属性computed

计算属性的值,依赖别的数据的值变化而变化.(身不由己).
计算属性.可以简写成一个函数.return最终的值.
函数名就是我们需要使用的数据名.
这个计算属性的函数,在函数内的数据变化时,都会自动触发返回新的值.

          computed: {
            num3() {
              return this.num1 + this.num2
            }
          },

计算属性默认是不能手动修改的.(不能主动改变值).
如果需要手动修改计算属性,需要给计算属性设置setter
在setter中修改计算属性依赖的数据.
计算属性的函数简写,实际上是全写的只有get的形式.

        computed: {
          num3: {
            get() {
              return this.num1 + this.num2
            },
            set(newVal) {
              this.num1 = newVal - this.num2
            }
          }
        },

四.侦测属性watch

        watch: {
          // 当num1变化时,就触发这个函数,
          num1() {
            this.num3 = this.num1 + this.num2;
          },
          // 当num2变化时,就触发这个函数
          num2() {
            this.num3 = this.num1 + this.num2;
          }
        },

immediate => 立即以表达式的当前值触发回调

        watch: {
          num1: {
            // 立即,默认触发一次handler.
            immediate: true,
            // handler在每次num1变化时都会触发.
            handler() {
              this.num3 = this.num1 + this.num2;
            }
          },
          // 当num2变化时,就触发这个函数
          num2: {
            immediate: true,
            // handler在每次num2变化时都会触发.
            handler() {
              this.num3 = this.num1 + this.num2;
            }
          }
        },

五.计算属性和watch的区别

计算属性是watch的一种特例.
计算属性能够实现的功能,watch都能实现.
watch能够实现的功能,计算属性不一定能够实现.例如异步操作.
1.计算属性内部不能包含异步操作.
2.计算属性有缓存，watch没有.

六.过滤器filters

如果一个数据要显示的格式需要更改,应该使用过滤器
| => 管道符.(angular)

  <div id='app'>
    <input type="text" v-model='msg'>
    <div>{{msg | money}}</div>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        msg: ''
      },
      // 过滤器.val形参就是 | 前面的表达式的值.
      filters: {
        money(val) {
          let re = /\B(?=((\d{3})+$))/g;
          return val.replace(re, ',');
        }
      }
    })
  </script>

七.自定义指令directives

指令 => 封装DOM操作
自定义指令 => 封装自己的DOM操作(封装一些ui框架特别有用)

  <div id='app'>
    <div v-color='color'>111</div>
  </div>
    <script>
    new Vue({
      el: '#app',
      data: {
        color: 'green'
      },
      directives: {
        // 第一个参数是绑定了自定义指令的标签。
        // 第二个参数是当前指令的一些信息.
        // config.value就是自定义指令的值.
        color(el, config) {
          el.style.backgroundColor = config.value
        }
      }
    })
  </script>
posted @ 2021-10-07 19:24  暗鸦08  阅读(354)  评论(0)    收藏  举报