vue模版语法

条件渲染

1、v-if、v-else-v-else-if

• 只有条件为true时，才会被渲染出来
• v-if渲染原理：
  • v-if是惰性的
  • 当条件为false时，其判断的内容完全不会被渲染或者会被销毁掉
  • 当条件为true时，才会真正渲染条件块中的内容

<view v-if="mScore>85">优秀</view>
<view v-else="mScore>60">及格</view>
<view v-else-if="">不及格</view>

2、v-show

<view v-show="isShow">Vshow</view>

与v-if的区别：

• 用法区别：
  • 1、v-show不支持template节点
  • 2、v-show不能搭配v-else使用
• 本质区别:
  • v-show当条件为flase时，DOM是真实渲染的，只是通过Css样式display:none的属性进行元素的隐藏
  • v-if当条件为false时，对应的元素不会渲染到DOM中
• 如何使用：
  • 使用的元素需要频繁的切换，可以使用v-show
  • 不会频繁的进行状态切换。可以使用v-if

3、v-for

• 列表渲染，用于遍历一组数据

<view v-for="(item,index) in mList">{{index+1}}、{{item}}</view>

v-for中的key有什么作用？

• 主要用于vue的虚拟DOM算法，在新旧Nodes对比时辨识Vnodes
• 如果不使用key，vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法
• 使用key时，会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素

什么是VNode

• VNode的全称是：Virtual Node,含义为虚拟节点，本质是JavaScript的对象
• 无论是组件还是元素，最终在Vue中表示出来的都是一个个的VNode节点

<view class="mBody" style="font-size: 20px;color: #f00;">mNewTest</view>
//元素都会被转化为一个个的vnode对象
const vnode ={
type:"view",
props:{
        class:"mBody",
        style:{
                font-size:"20px",
                color:"#f00"
        }
},
children:"mNewTest"
}

演变形式：template->VNode->真实DOM

• 虚拟DOM
  • 当页面有一大堆元素时，它们会形成一个VNodeTree

<view v-for="(item,index) in mArrays">{{item}}</view>
<view @click="doAdds">添加</view>
const mArrays = ref([{
    id: '1'
}, {
    id: '2'
}, {
    id: '3'
}, {
     id: '4'
}]);
const doAdds = () => {
    mArrays.value.splice(2,0,"{'id': '6'}")
}

• 如上述代码所示，向mArrays数组中第二个位置添加个id为6的元素， 那么Vue对于列表的更新是如何操作的呢？
• 事实上Vue会对于有key和没有key调用两个不同的方法
  • 有key，调用patchKeyedChildren方法
  • 没有key，调用patchUnkeyedChildren方法

数组更新的一些常用方法

• 下列方法会更改原有数组，会出发视图更新数据
  • push():向数组末尾添加元素
  • pop():移除最后一个元素
  • shift():移除第一个元素
  • unshift():向数组头部添加元素
  • splice():移除或替代已有元素
  • sort():对数组进行排序
  • reverse():进行数组反转操作
• 替换数组
  • filter():创建符合筛选条件的新数组
  • concat():对数组进行合并
  • slice():从指定位置拷贝原有数组元素，返回一个新数组