VUE3学习4-6

第四章 模板语法&VUE指令

模板语法

template	script setup
{{message}}	const message:string="XXXX"
{{message ? '你'：‘我’}}	const message:number=0
{{message+1}}	const message:number=1
{{message.split(',')}}	const message:string="X,X,X,X" 变成数组
{{message.split(',').map(v=>`%${v}`}	const message:string="X,X,X,X" 变成数组,加了%前缀字符

VUE指令v-

	template	script setup
v-text	<div v-text="message"></div>	const message:string="XXXX"
v-html	<div v-html="message"></div>	const message:string="<div>v-html用法:接受html标签文本</div>";
v-if	<div v-if=flag>if条件判断：操作DOM</div>	const flag:Boolean=true;
v-show	<div v-show=flag v-html="message9"> </div>	const flag:Boolean=true;
v-if\v-else-if\ v-else	<div v-if="flag2=='A'">A</div> <div v-else-if="flag2=='B'">B</div> <div v-else-if="flag2=='C'">xxxx</div> <div v-else>D</div>	const flag2:string="C";
v-on	<button v-on:click=“clicktap”> <button @click=“clicktap”>	function clicktap(){xxx}; 若点击的BUTTON外部还有点击事件，运行机制是从外到内执行函数；冒泡方式（父子）
v-bind	<n-button v-bind:style="quan">v-bind绑定样式</n-button>	绑定样式 type Stype={   color:string,   height:string } const quan:Stype={   color:"red", height:"100px"}

v-on常用小技巧：（或者只刷新1次）

<button @click.stop=“clicktap”>不执行父级v-on事件；

<button @click.prevent=“clicktap”>不执行刷新事件； 

<button @click.once=“clicktap”>只执行刷新1次； 

v-bind常用小技巧：

绑定样式Class写法:

<n-button :class="['a','b']">Class绑定样式</n-button>
<style scoped>
  .a{
    color:aqua;
  }
  .b{
    height: 60px;
  }
</style>


<n-button v-bind:style="quan">v-bind绑定样式</n-button>
type Stype={
  color:string,
  height:string
}
const quan:Stype={
  color:"red",
height:"100px"}



<button :class="cls"> Class类样式 </button>
type Cls={
a:Boolean,
b:Boolean
}
const cls:Cls={
  a:false,
   b:true
}

VUE使用频率最高指令v-for

const arr:Array<number>=[1,2,3,4,5]

  <div :key="item" v-for="item in arr">{{item}}</div>

 <div :key="item" v-for="item in arr2">{{item.name}}</div>

  const arr2:Array<any>=[{name:"cc"},{name:"2"},{name:"3"}]

VUE使用频率最高指令v-model:绑定表单变量；

一、缺乏响应式的写法：

 const message:string="v-model test"

    <input v-model="message" type="text">  
    <div>{{message}}</div>

引入REF可以解决该问题。

import { ref  } from 'vue'   
const message=ref("v-model test  缺乏响应式写法")

第五章 虚拟DOM&DIFF算法

虚拟DOM：

传统用直接操作DOM，用VUE是操作JS的虚拟DOM，来换取性能的提升；

DIFF算法：

 <div :key="item" v-for="item in arr2">{{item.name}}</div>
 <div   v-for="item in arr2">{{item.name}}</div>

无KEY：全部遍历，性能差；

有KEY：前序、后序对比算法，在处理中部节点；

乱序：前序、后序对比算法，在处理中部乱序节点，对能复用的，进行标记；

第六章 REF全家桶

一、响应式

console.log可以获取，但界面不变化；

import { ref  } from 'vue'   
const message=ref("ref响应式写法")

    <input v-model="message" type="text">  
    <div>{{message}}</div>






import { ref, Ref  } from 'vue'   //Ref接口
const message:Ref<string>=ref("Ref响应式写法")
  function xiangying(){
      message2.value="傻叉"
     }

<n-button @click="xiangying">响应</n-button>
    <div>{{message2}}</div>

Ref是一个对象；（CreateRef，里面含有value属性）

IsRef 判断是否是REF对象；

import { ref ,reactive, Ref,isRef, shallowRef} from 'vue'   

 let message2:Ref<string>=ref("v-model test  缺乏响应式写法")
      const message3:number=3;



     function xiangying(){
      console.log(isRef(message3));
      console.log(isRef(message2));
     }

shallowRef：非响应式的数据，只能到value这一层级，不能到下一层name;

创建一个跟踪自身 .value 变化的 ref，但不会使其值也变成响应式。

如果shallowRef更新了，有两种方式造成：一、triggerRef；二、对ref进行了更新。

      let messageShallowRef=shallowRef(
        {name:"小许"}
      )
     function xiangying(){
      messageShallowRef.value={name:"小泉"};
     }


  <n-button @click="xiangying">响应</n-button>
    <div>{{messageShallowRef}}</div>

triggerRef 

强制更新页面DOM

      let messageTriggerRef=shallowRef(
        {name:"小许"}
      )
     function xiangying(){
      messageTriggerRef.value.name="夏朗";
      triggerRef(messageTriggerRef);
     }


  <n-button @click="xiangying">响应</n-button>
    <div>{{messageTriggerRef}}</div>

customRef :可以写一些调用接口后，更新触发的操作；customRef 是个工厂函数要求我们返回一个对象 并且实现 get 和 set，很难懂，下回再消化满哥的内容；

<script setup lang="ts">
import { Ref, shallowRef, triggerRef, customRef } from 'vue'
 
function Myref<T>(value: T) {
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newVal: T) {
        console.log('set');
        value = newVal
        trigger()
      }
    }
  })
}
 
let message = Myref('小满')
const changeMsg = () => {
  message.value = '大满'
  // triggerRef(message)
}
</script>