做app和做网站,大庆做网站,网站管理员登录,自适应网页设计规范Vue侦听器是根据组件状态做DOM更新或者异步更新其他级联状态的。计算属性的主要目标是根据已有数据计算出组件的状态#xff0c;它是组件内部的计算#xff0c;计算结果在组件内部应用。侦听器的主要目标是根据组件状态的变动#xff0c;做级联的或者异步的操作或DOM更新它是组件内部的计算计算结果在组件内部应用。侦听器的主要目标是根据组件状态的变动做级联的或者异步的操作或DOM更新操作的影响范围比计算属性大得多。
script setup langts
import {reactive, ref, watch} from vueconst objreactive({name:obj,count:0});// count is formal parameter, its change will not saved to obj.countwatch(()obj.count,(count){countcount3;console.log(watch by obj.count by getter count);});// obj is real parameter , its change will be saved to objwatch(obj,(oldValue,newValue){console.log(watch by obj by deep way newValue.count);});watch(name,(oldName,newName){console.log(oldName is oldName, newName is newName);});/scripttemplatedivbutton typebutton clickobj.count测试侦听器/button/div
/templatestyle/style
侦听器的标准格式如下
const dataref({});watch(data,(oldValue,newValue){console.log(oldValue);console.log(newValue);},{immediate:true, //default value is false, true value means watch callback function will be called immediatelydeep:true, //default value is false, true value means watch is a deep watchflush:post //default value is pre, post means watch callback function can fetch data after Vue DOM updated completely});
侦听器默认情况下是懒执行、浅层侦听、在Vue组件更新之前被调用的。
