Vue基础属性

最新推荐文章于 2023-05-05 20:51:06 发布

Noble Wang

最新推荐文章于 2023-05-05 20:51:06 发布

阅读量466

点赞数

分类专栏： 02-Vue.js 文章标签： Vue基础属性

本文链接：https://blog.csdn.net/qq_35801979/article/details/90523877

版权

02-Vue.js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

computed

computed 计算属性
案例：为什么vue中要使用计算属性？
比如：让一个字符反向
分析：

      <p> {{ msg.split('').reverse().join('') }} </p>

上面代码的写法，有些违背关注点分离，而且会让我们的DOM结构看起来不简洁

解决方案：
从上面的案例得出两个结论：
1. 我们的使用结果是要像data选项中定义的数据一样直接使用，那就是最好的
2. 我们还必须需要一定的逻辑支撑，一想到逻辑，那我们就想到了函数

综上： vue这边提出来一个新的解决方案就是：计算属性

在项目中，使用时候使用计算属性呢?
只要满足以下两个条件：
1. 有逻辑处理
2. 像变量一个使用

总结：计算属性一定要有返回值

watch 侦听属性
1. 是用来监听 data 选项中的数据的，只要data中的数据发生改变，它就会自动触发
2. watch是一个对象，它里面存储的是 { [key: string]: string | Function | Object | Array }
3. 往往watch我们里面常存储的是方法
4. watch中方法的名称就是 data 选项中数据的名称
5. 深度监听
javascript watch: { num: { deep: true, handler () { //数据改变之后执行的事情 } } }

computed vs methods

计算属性是基于它们的依赖进行缓存的。
计算属性只有在它的相关依赖发生改变时才会重新求值

computed vs watch vs methods

项目中：
computed：
1. 有逻辑
2. 像变量一样使用
methods
事件处理程序
watch
异步操作（数据请求）

mixin

使用它的好处：
1. 将 options 中的配置项可以单独抽离出来，单独管理，这样方便维护
使用：
1. 新建一个对象用来保存 options 中某一个配置项，比如： methods
2. 接下来要将我们创建好的对象混入到我们的 ViewModel 中，我们的混入形式有两种

局部混入【推荐】
只是在当前 vm 中才有

      new Vue({
      mixins: [ myMixin ]
      })

全局混入
在所有的vm中都会有

     Vue.mixin({
     methods: {
         aa () {}
     }
     })

虚拟DOM 和 Diff 算法

什么是虚拟DOM？
使用虚拟DOM有什么好处？
什么是Diff 算法？
diff算法是用来做什么的？

** Vue 2.x版本使用的就是 VDOM ( 虚拟DOM ) **

接下我们以一个案例的形式告诉大家：列表渲染为什么要加key?
案例：来说明为什么 virtual dom 是好用的

业务：我有一个数 0 ，我希望这个数自增到 10001 ，然后让这个数据输出到页面中？
```
var box = document.querySelector( '.box' ) ;
var count = 0 ;
// console.time( 'a' )
//   for( var i = 1 ; i < 10002; i++ ){
//     count = i
//     box.innerHTML = count 
//   }
// console.timeEnd( 'a' )
// a=50ms
  
var num = 0 
console.time( 'b' )
  for ( var i = 0 ; i < 10002 ; i ++ ){
    num = i 
  }
  box.innerHTML = num
console.timeEnd( 'b' )
// b=1ms
```
总结：
根据刚才书写的案例我们得知了：
1. 越多的真实dom操作，越损耗性能
2. 操作数据要大大的减少性能损耗，提高渲染效率

–> 能不能创建以个树形结构( 对象表示 )来表示一个DOM结构呢？ --> 虚拟DOM

VDOM的渲染流程
1. 获取数据
2. 根据数据创建VDOM （相当于给对象赋值）
3. 根据VDOM渲染生成真实DOM ( 根据createElement(‘DIV’) )
4. 当数据发生改变后，又会生成新的VDOM
5. 通过 diff 算法比对多次生成的 VDOM, 将不同的内容比对出来，然后在进行真实DOM渲染，
一样的内容是不会进行渲染的，这就是VDOM 的 ‘就地复用’ | ‘惰性原则’
jsx 在vue采用的原因

VDOM对象树态繁琐了，如果能像hom结构一样书写就好了，这就引入了 jsx
render函数是做什么的

但是jsx始终还是不能直接去用的，必须转换成对象才能使用，
vue中使用render 函数解析jsx语法，然后换成对象结构，在通过 createElment 生成节点，渲染成真实DOM