vue watch 修改滚动条_Vue 里的 computed 和 watch 的区别
computed
computed 是计算属性,它会根据你所依赖的数据动态显示新的计算结果
计算属性将被加入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例
通过计算出来的属性不需要调用直接可以在 DOM 里使用
基础例子
var vm = new Vue({el: '#app',data: {message: 'hello'},template: `<div><p>我是原始值: "{{ message }}"</p><p>我是计算属性的值: "{{ computedMessage}}"</p> // computed 在 DOM 里直接使用不需要调用</div>`,computed: {// 计算属性的 gettercomputedMessage: function () {// `this` 指向 vm 实例return this.message.split('').reverse().join('')}}
})
结果:
我是原始值: "Hello"
我是计算属性的值: "olleH"
如果不使用计算属性,那么 message.split('').reverse().join('') 就会直接写到 template 里,那么在模版中放入太多声明式的逻辑会让模板本身过重,尤其当在页面中使用大量复杂的逻辑表达式处理数据时,会对页面的可维护性造成很大的影响
而且计算属性如果依赖不变的话,它就会变成缓存,computed 的值就不会重新计算
所以,如果数据要通过复杂逻辑来得出结果,那么就推荐使用计算属性
watch
一个对象,键是 data 对应的数据,值是对应的回调函数。值也可以是方法名,或者包含选项的对象,当 data 的数据发生变化时,就会发生一个回调,他有两个参数,一个 val (修改后的 data 数据),一个 oldVal(原来的 data 数据)
Vue 实例将会在实例化时调用$watch()
,遍历 watch 对象的每一个属性
基础例子
new Vue({data: {n: 0,obj: {a: "a"}},template: `<div><button @click="n += 1">n+1</button><button @click="obj.a += 'hi'">obj.a + 'hi'</button><button @click="obj = {a:'a'}">obj = 新对象</button></div>`,watch: {n() {console.log("n 变了");},obj:{handler: function (val, oldVal) { console.log("obj 变了")},deep: true // 该属性设定在任何被侦听的对象的 property 改变时都要执行 handler 的回调,不论其被嵌套多深},"obj.a":{handler: function (val, oldVal) { console.log("obj.a 变了")},immediate: true // 该属性设定该回调将会在侦听开始之后被立即调用}}
}).$mount("#app");
注意:不应该使用箭头函数来定义 watcher 函数,因为箭头函数没有 this,它的 this 会继承它的父级函数,但是它的父级函数是 window,导致箭头函数的 this 指向 window,而不是 Vue 实例
- deep 控制是否要看这个对象里面的属性变化
- immediate 控制是否在第一次渲染是执行这个函数
vm.$watch() 的用法和 watch 回调类似
- vm.$watch('data属性名', fn, {deep: .., immediate: ..})
vm.$watch("n", function(val, newVal){console.log("n 变了");
},{deep: true, immediate: true})
总结
- 如果一个数据需要经过复杂计算就用 computed
- 如果一个数据需要被监听并且对数据做一些操作就用 watch
vue watch 修改滚动条_Vue 里的 computed 和 watch 的区别相关推荐
- vue watch 修改滚动条_Vue.js 中滚动条始终定位在底部的方法
Vue.js 中滚动条始终定位在底部的方法 发布于 2020-2-23| 复制链接 分享一篇关于vue 中滚动条始终定位在底部的方法,具有很好的参考价值,希望对大家有所帮助.一起跟随小妖过来看看吧 滚 ...
- vue watch 修改滚动条_vue 中滚动条始终定位在底部的方法
滚动条定位在底部,首先想到的是,动态修改滚动条到顶部的距离等于div的高度, 代码实现: var div = document.getElementById('data-list-content') ...
- vue watch 修改滚动条_vue实现滚动监听,点击瞄点平滑滚动,控制内嵌滚动条滚动...
滚动效果 当页面滑动时,左边导航栏会自动定位到当前标题,一级标题展开,二级标题的字体变红色,字体前面有一个小图标. 上图........... Html代码 {{NItem1.ordered}} {{ ...
- vue watch 修改滚动条_只需要这几个vue快捷开发技巧,看完技术提升30%!!!!...
前言 一般在组件内使用路由参数,大多数人会这样做: 先赞再看,养成习惯~ 今天分享十个vue开发技巧给大家,中级前端工程师 1.路由参数解耦 export default {methods: {get ...
- vue中修改滚动条样式
该方法只适用于Chrome浏览器 样式写在 APP.vue 中,可以用在全局,如果只用在那个盒子中,只需要在::前面加上盒子的class名就可以 ::-webkit-scrollbar {width: ...
- vue方法调用失败后多次调用_浅析Vue中 computed / watch / methods的区别
思考:请说下Vue中computed 和 watch 的区别( 面试题 ) 构造选项 computed / watch / methods computed ● computed 起初构想 在Vue的 ...
- 怎么改vue项目的标题_Vue动态修改网页标题的方法及遇到问题
业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:功能授权,功能授权(张三). Vue下有很多的方式去修改网页标题,这里总结下解决此问题的几种方案: 一.最笨方案 ...
- Vue项目修改浏览器滚动条样式
Vue+Element组件修改浏览器滚动条样式 前言:在Vue项目中会有使用到滚动条的情况,但是会遇到原生滚动条的样式不满足UI设计,因此需要改变滚动条的样式,下面使用两种方式来修改滚动条的样式,以V ...
- vue、css修改滚动条样式
vue.css修改滚动条样式 样式为 /* 滚动条 */ body *::-webkit-scrollbar {width: 10px;height: 10px; } body *::-webkit- ...
最新文章
- vs快捷键及常用设置(vs2012版)
- Python之Python 安装环境搭建
- Android 文件布局一些细节备忘
- 交换机与路由器在网路中所扮演的角色—Vecloud微云
- Linux 访问文件的acl信息,linux文件权限管理与ACL访问控制列表
- Linux_access the file or directory which start with -
- 剑指offer之扑克牌的顺子
- matlab灰色图像和彩色图像的均值、标准差和熵
- python时间控件readonly属性_Selenium2+python自动化25-js处理日历控件(修改readonly属性)转自-上海悠悠...
- 2022年凯立德移动导航系统C-Car版 绝对通用车载
- 关于小米历史官方刷机包
- signature=290c6e3366bfb08cc93085d7fdf78281,AMC Entertainment Inc
- linux 合并视频文件,Linux下转换视频格式与合并视频
- mybatis中的if-else使用及if嵌套使用
- java实现:随机生成小写字母,并判断是元音还是辅音
- Dict添加元素 - Python
- Java判断日期在指定时间段中的第几周
- uva10635 Prince and Princess
- 办理护照(学生集体户口)~备用
- python怎么把程序挂在远端服务器_Python实现在远端服务器挂代码—发送定时天气预报至邮箱+每日一句(小白教程)...
热门文章
- ElasticSearch可视化工具Dejavu安装使用
- C#中IEnumerableT.Distinct()将指定实体类对象用Lambda表达式实现多条件去重
- 计算机网络考试试题库-期末考试题库含答案
- 使用acme.sh签发Let's Encrypt的免费数字证书
- linux系统启动自动启动,linux系统下的自动启动
- alxctools索引超出了数组界限_[译]V8中的数组类型
- linux apache certbot,从操作系统软件包安装Certbot
- java base64 加解密_java Base64加解密
- html风车相册代码,Css Html 大风车(示例代码)
- java smp_什么是SMP系统