vue学习三(数据响应作用域、freeze、生命周期、v-once、$watch)

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

文章目录

      • 数据响应作用域

      • 数据freeze作用域

      • 生命周期

      • $watch

      • v-once

数据响应作用域

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值

<div id="app_1">
        <p>{{ a }}</p>
        <!-- 不可以渲染在元素上 ，不会触发任何视图的更新，但是可以通过console.log输出-->
        <p>{{ b }}</p>
    </div>
    <script type="text/javascript">
        var res_data = { a: 1 }
        var vm = new Vue({
            el: "#app_1",
            data: res_data
        })
        // 获得这个实例上的属性
        // 返回源数据中对应的字段
        vm.a == data.a // => true
        // 设置属性也会影响到原始数据
        vm.a = 2
        data.a // => 2
        // ……反之亦然
        data.a = 3
        vm.a // => 3
        // 实例的属性返回源数据对应的字段
        // 设置属性也会影响到原始数据
        console.log(vm.a, res_data.a)
        // 如果你添加一个新的属性，
        // 那么对 b 的改动将不会触发任何视图的更新
        vm.b = "hi"
        console.log(vm.b)
    </script>

控制台输出

1 1
hi

数据freeze作用域

这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。

  <!--2、 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。 -->
    <div id="app_2">
        <p>{{ foo }}</p>
        <button v-on:click="foo='baz'">不能改变数据</button>
    </div>
    <script type="text/javascript">
        var obj = { foo: "bar" }
        Object.freeze(obj)
        var vm = new Vue({
            el: "#app_2",
            data: obj
        })
    </script>

生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

比如 created 钩子可以用来在一个实例被创建之后执行代码

  <script type="text/javascript">
        new Vue({
            data: {
                a: 1
            },
            created: function () {
                // `this` 指向 vm 实例
                // 浏览器控制台输出a is: 1
                console.log('a is: ' + this.a)
            }
        })
    </script>

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

$watch

    <div id="example">
        <p>{{ msg }}</p>
        <button v-on:click="reverse_msg">反转消息</button>
    </div>
    <script>
        var data = { msg: 1 }
        var vm = new Vue({
            el: '#example',
            data: data,
            methods: {
                reverse_msg: function () {
                    this.msg = "hello vue"
                }
            }
        })
        vm.$data === data // => true
        vm.$el === document.getElementById('example') // => true
        // $watch 是一个实例方法
        vm.$watch('msg', function (newValue, oldValue) {
            // 这个回调将在 `vm.a` 改变后调用
            console.info("msg值有变动了～～～～")
        })
    </script>


当点击反转消息，控制台输出

msg值有变动了～～～～

v-once

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定

 <div id="app_1">
        <span v-once>{{ msg }}</span>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app_1",
            data: {
                msg: 44
            }
        })
    </script>

浏览器渲染为44

以上是 vue学习三(数据响应作用域、freeze、生命周期、v-once、$watch) 的全部内容， 来源链接： utcz.com/z/378285.html

回到顶部