如何watch dom

Question

如何watch dom

<template lang="html"> <div class="a">   <div class="goods-container">       <div class="goods-left" ref="leftScroll">         <ul>           <li class="goods-left-list" :class="{'active':currentIndex===idex}" v-for="(item,idex) in goods" :key='item.name' @click="tofood(idex)">             <span class="text border-1px">               <span class="icon" v-if="item.type>0" :class="icon[item.type]"></span>{{item.name}}             </span>           </li>         </ul>       </div>

data() {     return {       goods: [],       icon: ['decrease', 'discount', 'guarantee', 'invoice', 'special'],       listHeight: [],       scorllY: 0,       foodInfo: {},       dom: this.$refs.leftScroll     };   }, ``

watch: {

dom(newvalue,oldvalue) {   console.log("aaa");   console.log(newvalue+"-------"+oldvalue); }

},

 无论是普通dom 还是for 循环的都watch 不了 （普通的是不是因为没有变化才没有监听到）   但打印data 中的 数据dom  显示undefinde

Answer 1

你看下你的是编译模式还是引入vue.js模式？编译模式才支持

Answer 2

data()的时候还没有渲染视图this.$refs.leftScroll这个东西应该是undefined