序言
watch
、computed
和methods
之间的对比
computed
methods
方法表示一个具体的操作,主要书写业务逻辑;
watch
一个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可以看作是computed
和methods
的结合体;
computed和watch的区别
计算属性具有缓存。计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 lastName和firstName都没有发生改变,多次访问 fullName计算属性会立即返回之前的计算结果,而不必再次执行函数。
其他
$nextTick是什么?
$nextTick就是用来知道什么时候DOM更新完成的
vue如何获取dom
先给标签设置一个ref值,再通过this.$refs.domName获取,例如:
<div ref="test"></div>
const dom = this.$refs.test
mounted() { // 注册滚动事件,在滚动的时候如果cascader打开,就关闭它 const ele = document.getElementsByClassName('main')[0]; if (ele) { ele.addEventListener('scroll', this.listenScroll, { passive: true, }); } }, beforeDestroy() { // 移除滚动事件监听 const ele = document.getElementsByClassName('main')[0]; if (ele) { ele.removeEventListener('scroll', this.listenScroll, { passive: true, }); } },
vue中的ref和$refs
ref有三种用法:
1、ref 加在普通的元素上,用this.ref.name 获取到的是dom元素
2、ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方法。
3、如何利用 v-for 和 ref 获取一组数组或者dom 节点
https://www.cnblogs.com/xumqfaith/p/7743387.html
cookie
filters: { format_star(str) { switch (str) { case "FiveStar": return "五星"; break; case "QuasiFiveStar": return "准五星"; break; case "FourStar": return "四星"; break; case "QuasiFourStar": return "准四星"; break; case "ThreeStar": return "三星"; break; case "QuasiThreeStar": return "准三星"; break; case "Economical": return "经济型"; break; default: return "请选择"; } }
async
Vue.nextTick()用于延迟执行一段代码。
vue 中的const {XXX } =this 的作用效果
样例1:
const { xxx } = this.state;
上面的写法是es6的写法,其实就相当于:
const xxx = this.state.xxx
样例2:
const {comment,index,deleteComment} = this
上面的这句话是一个简写,最终的含义相当于
const comment = this.comment
const index = this.index
const deleteComment = this.deleteComment