##书写风格

vue2 中的 optiond api

    <script>
     export default {
        data () {
            return {
                name: '刘德华'
            }
        },
        methods: {
            xxx() {
            
            }
        }
    }
    </script>

vue3中的setup函数模式

定义的变量和方法都必须手动return出去，比较麻烦

<template>
  <div>{{ a }}}</div>
</template>
<script>
    export default {
        setup() {
            const a = 3
            return {
              a
            }
        }       
    }
</script>

vue3 setup语法糖模式

<template>
    ## 插值模板语法
    <div>{{ a }}}</div>
  
    ## 支持模板运算
    <div>{{ a + 2 }}</div>
  
    ## 三元表达式
    <div>{{ a ? 'true' : 'false' }}</div>
  
    ## api运算
    <div>{{ b.map(v => ({ num: v })) }}</div>
  
    ## v-text
    <div v-text="c"></div>
  
    ## v-html解析标签但是不支持组件
    <div v-html="d"></div>
    ## v-if  、  v-show 、 v-else 、v-else-if
    <div v-if="e"></div>
  
    ## 事件v-on @click 动态的事件切换@[event]
    <div @click="xxx"></div>
    <div @[event]="xxx"></div>
  
    ## 事件冒泡.stop、.prevent、.onece只执行一次
    <div  @[event]="parent">
        <div @click.stop="son"></div>
    </div>
  
    ## v-bind绑定属性 :id
    <div v-bind:id="id"></div>
    ## 绑定style
    <div :style="style"></div>
    ## 绑定class
    <div :class="['box1','box2']"></div>
    <div :class="[ c ? 'box1' : 'box2' ]"></div>
  
    ## v-model 绑定表单元素的
    <input v-model="f"></input>
  
    ## v-for遍历 嵌套
    <div v-for="item in g"></div>
  
    ## v-once 只渲染一次  v-memo="[item == 2]"
    
</template>
<script setup lang="ts">
  import { ref } from 'vue'
    const a:number = 1
    const b:number[] = [1,2,3,4,5]
    const c:string = '我是v-text'
    const d:string = '<section>我是v-html</section>'
    const e:boolean = true
    const event = 'click'
    const xxx = () => {
      console.log('点击了')
    }
    const parent = () => {
      console.log('我是父级')
    }
    const son = () => {
      console.log('我是子级')
    }
    
    const id:string = '22'

    const style = {
      color: 'red',
      fontSize: '18px'
    }
    
    const value:string = '666'

    const f = ref('响应式')

    const g:string[] = ['小满'、'大满']
</script>
<style scoped lang="scss">
  .box1 {
    color: bule
  }
  .box2 {
    color: red
  }
</style>

ref

<template>
  <div @click="change">修改</div>
  ## 读取dom
  <div ref="dom">我是dom</div>
</template>
<script setup lang="ts">
  import { ref, isRef, shallowRef, customRef } from 'vue'
  import type { Ref } from 'vue'
  type M = {
    name: string
  }
  ## 类型比较简单
  const Man = ref<M>({name: '刘德华' })
  
  ## 类型比较复杂
  const Man:Ref<M> = ref({ name: '刘德华' })
  
  ## 直接做一个类型推导
  const Man= ref({ name: '刘德华' })
  
const change = () => {
    Man.value.name = '张学友'
//    
  console.log(isRef(Man))  // true || false
}

// shallowRef 浅层次的 ref和shallowRef 不能混用
  
// 自定义一个ref
function myRef<T>(value: T) {
    return customRef((track,trigger) => {
      return {
        get() {
          // 收集依赖
          track()
          return value
        },
        set(newValue) {
          // 触发依赖
          value = newValue
          trigger()
        }
      }
    })
}

// 读取dom元素
const dom = ref<HTMLDivElement>()
console.log(dom.value?.innerHTML)
</script>

reactive

ref支持所有的不类型，而reactive 只支持引用类型 Array、Object、Map、Set
鼠标移上去可以手动检测
ref取值跟赋值都要加.value 而reactive是不需要.value

reactive 不能直接赋值，否则会破坏响应式对象
解决方法：1.数组可以用push + 结构赋值 2.添加一个对象 把数组当作一个属性去解决

<template>
  <div v-for="item in list"></div>
  <button @click="add">添加</button>
</template>
<script lang="ts" setup>
import  { reactive, readonly, shallowReactive } from 'vue'
type M = {
  name: string,
  age: number
}

let form = reactive<M>({
  name: '刘德华',
  age: 14
})


// 方式一
let list = reactive<string[]>([])

// 方式二  list.arr
let list = reactive<{
  arr: string[]
}>({ arr: [] })


const add = () => {
  setTimeout(() => {
    // 处理异步
    let res = ['edg','fff','gtg']
    list = res // 不能赋值
    list.push(...res) // 用结构赋值
    
  //  方式二
    list.arr = res
    
  },2000)
  list.push{'sss'}
  
}

// readonly 把reactive当作只读  它是会受reactive 的影响
let obj = reactive({ name: '刘德华'})
const read = readonly(obj)

</script>

toRef、 toRefs、 toRaw

toRef只能修改响应式对象的值 非响应式视图毫无变化 应用场景：

<template></template>
<script lang="ts" setup>
  const man = { name: '刘德华', age: 14, like: 'music'}
  const like = toRef(man, 'like')
  useDemo(toRef(man, 'like')) // 函数 属性解出来赋值给一个函数
</script>

watch监听器

<template>
  <input v-model="message"></input>
</template>
<script setup lang="ts">
import  { ref , reactive, watch } from 'vue'

let message = ref<string>({
  name: {
    bar: '444'
  }
})

watch([message,message2], (newValue, oldValue) = > {
  console.log(newValue, oldValue)
},{
  deep: true
})

</script>