vue에서 시계의 속성은 무엇입니까

watch는 모니터링 속성입니다. Vue에서는 watch 속성을 통해 특정 속성의 변경을 모니터링할 수 있습니다. 이 속성이 변경되면 다음과 같은 작업을 수행할 수 있습니다. 1. 모니터링되는 속성이 모니터링하는 속성이 변경되면 콜백 함수가 자동으로 호출되어 수행됩니다. 2. 모니터링 속성 모니터링되는 속성이 존재해야 유효합니다. 모니터링 속성을 작성하는 방법에는 "new Vue({watch:{}})"와 "vue instantiated object.$watch('property name' callback function)"라는 두 가지 방법이 있습니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

vue는 속성을 모니터링합니다

개발 중에 속성이 변경되면 일부 작업을 수행해야 하는 상황에 직면하게 됩니다. 이 변경을 감지하는 속성을 Vue에서는 모니터링 속성이라고 합니다.

1. 모니터링 속성이란 무엇입니까? vue에서는 이 속성이 변경되면 일부 작업을 수행할 수 있습니다.

모니터링 속성으로 모니터링하는 속성이 변경되면 자동으로 콜백 함수(핸들러)가 호출되어 해당 작업이 수행됩니다.

모니터링 속성으로 모니터링하는 속성이 존재해야 유효합니다.

• 여기에서는 날씨 사례를 사용하여 모니터링 속성이 무엇인지 설명합니다.
• 먼저 html 코드:

    <div id="app">
        <p>今天天气很{{info}}</p>
        <button v-on:click="change">切换天气</button>
    </div>

다음으로 js 코드를 작성합니다.

    var vm = new Vue({
        el: "#app",
        data: {
            isHot: true,
        },
        computed: {
            info: function () {
                return this.isHot ? "热" : "冷";
            }
        },
        methods: {
            change: function () {
                this.isHot = !this.isHot;
            }
        },
        watch: {
            isHot: {
                handler:function (newVal, oldVal) {
                    console.log("isHot属性发生了变化");
                },
            }
        }
    });

코드의 handler 함수는 다음과 같습니다. 앞서 언급한 콜백 함수는 isHot 속성이 변경되면 자동으로 호출됩니다.

물론 idHot 객체에 immediate 속성을 ​​추가할 수 있습니다. 이 속성의 부울 값이 true이면 handler 콜백이 실행됩니다. 함수는 초기화 중에 한 번 호출됩니다.

    watch: {
        isHot: {
            handler:function (newVal, oldVal) {
                console.log("isHot属性发生了变化");
            },
            immediate: true
        }
    }

handler这个函数就是我们前面说的回调函数，当isHot属性发生变化的时候，这个函数就会自动调用。

当然我们可以在idHot对象面添加一个属性：immediate，当此属性布尔值为真的时候，handler回调函数在初始化的时候就会调用一次。

    vm.$watch('isHot',function (newVal, oldVal) {
        console.log("isHot属性发生了变化");
    });

2.监视属性的写法

监视属性有两种写法：

• 在vue实例化对象中直接书写：
  new Vue({watch:{}}),然后传入相关配置
• 通过vue实例化对象.$watch('属性名'，回调函数)来书写

这里的第一种写法上面我们已经展现过了，下面我们就展示一下第二种写法：

这里我们假设vue的实例化对象为vm。

    watch: {
        isHot: {
            handler:function (newVal, oldVal) {
                console.log("isHot属性发生了变化");
            },
            immediate: true,
            deep: true
        }
    }

3.监视属性之深度监视

前面我们实现的监视，只能监视vue实例data中直接的简单数据，要是遇到对象或者数组，就无法监视了。

这样做的方法是vue为了提高效率，在vue监视属性中，默认只监视一层，如果要监视多层，就需要我们手动开启深度监视。

rrreee

其中deep:true

2. 모니터링 속성을 작성하는 방법

모니터링 속성을 작성하는 방법에는 두 가지가 있습니다:

vue 인스턴스화 객체에 직접 작성:
new Vue({watch:{ }} ), 그리고 관련 구성을 전달합니다vue instantiation object.$watch('property name', callback function)를 사용하여 write

🎜🎜첫 번째 작성 방법 여기는 위와 같습니다. 이미 표시되었으므로 두 번째 작성 방법을 보여드리겠습니다. 🎜🎜여기서 vue의 인스턴스화 개체가 vm이라고 가정합니다. 🎜rrreee🎜🎜🎜3. 모니터링 속성의 심층 모니터링🎜🎜🎜🎜 앞서 구현한 모니터링은 vue 인스턴스 데이터에서 직접 단순 데이터만 모니터링할 수 있으며, 객체나 배열을 만나면 모니터링할 수 없습니다. 🎜🎜이를 수행하는 방법은 효율성을 높이기 위해 Vue 모니터링 속성에서 기본적으로 하나의 레이어만 모니터링하는 것입니다. 여러 레이어를 모니터링하려면 심층 모니터링을 수동으로 활성화해야 합니다. 🎜rrreee🎜deep:true는 심층 모니터링을 켭니다. 심층 모니터링은 Vue에서 데이터의 객체나 배열을 모니터링하는 것입니다. 객체나 배열의 속성이 변경되면 모니터링 속성의 콜백 함수가 자동으로 호출됩니다. 🎜🎜Vue에서는 실제로 객체의 내부 값 변화를 감지하는 것이 가능합니다. 그런데 Vue 모니터링 속성이 기본적으로 심층 모니터링을 활성화하지 않는 이유는 무엇입니까? 🎜🎜Vue 모니터링 속성의 콜백 함수는 데이터가 변경될 때만 호출되기 때문에 심층 모니터링이 켜져 있으면 Vue는 객체 내부의 모든 속성을 모니터링해야 하므로 Vue의 효율성이 크게 떨어집니다. 🎜🎜모니터링 속성을 사용할 때 특정 비즈니스 요구에 따라 심층 모니터링을 활성화할지 여부를 판단합니다. [관련 권장사항: 🎜vuejs 동영상 튜토리얼🎜, 🎜웹 프론트엔드 개발🎜]🎜

위 내용은 vue에서 시계의 속성은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!