一、什么是watch

watch:用于监听data里面的数据是否被修改，一旦修改就可以执行一些其他的操作【也是方法】

二、解析watch

watch在监听的时候，可以有二次参数，第一次参数为更新的数据，第二个参数为之前的旧数据

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../public/js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <h1>{{text}}</h1>
    <button @click="text = '我是新的一'">监听</button>
</div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            text: '我是旧一',

        },
        watch: {
            //监听器的作用就是用来监听数据是否发生了变化，变化后可以进行一些其他操作
            //只要没有发生变化，就没有办法进行其他的操作
           
            text: function (newData, oldData) {
                //newData是更新后的数据
                //oldData是旧数据
                console.log(newData, oldData)
                this.text = '我是最新的一'
            }
        }
    })
</script>

三、watch和计算属性的区别

计算属性和监听属性的不同
    1.计算属性的get必须有return，而监听属性return可有可无
    2.计算属性具有缓存的效果，而监听属性没有缓存
    3.计算属性可以自定义名称，而监听属性只能监听和data里面的名称相同
    4.计算属性适用于复杂的运算，而监听属性适合一些消耗性功能，比如Ajax

四、watch高级

当使用watch监听的时候，我们可能会发现它可以监听某个数据【单数据，数组】，但是当监听对象的时候，明明数据修改了，却没有监听的提示，这是为什么呢？

这个时候，需要我们开启深度监控，因为在我们没有开启深度监控的时候，watch只会监听第一层，而对象的数据修改了，但对象它的首地址没有修改，所以watch判定它没有发生数据的变化，从而监听不到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../public/js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <h1>{{text}}</h1>
    <button @click="setHandel">监听</button>
    <h1>{{array}}</h1>
    <button @click="setArray">更改数组的值</button>
</div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            text:{
                name:'我的一',
                age:21
            },
            array: [1,2,3,4,5]
        },
        methods:{
            setHandel(){
                this.text.name = '我是新的一'
            },
            setArray(){
                /**
                 * 当我们想要更改数组中的值的时候，
                 * this.array[0] = '我是新一',是没有办法修改的
                 * 因为vue的数据双向绑定中，调用的是set和get函数，
                 * 但是在数组里面没有这二个函数
                 * 所以我们只能使用vue封装的$set和变异方法（也就是push啊。。。）
                 */
                this.$set(this.array,0,'我是新一')
            }
        },
        watch: {
            //watch监听器，只能监听第一次，
            //也就是在监听对象的时候，虽然对象中的属性值发生了改变
            //但对象的首地址没有改变，所以监听器认为没有改变数据
            //当想要监听对象的时候，想要开启深度监听
            //deep:true
            text: {
                handler:function () {
                    alert('监听到了')
                },
                deep:true
            }
        }
    })
</script>

# vue.js # elementui # javascript
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign