Vue3新点

vue3新点

1.使用ref响应式数据 .value改值
2.vscode自定义代码片段
3ref获取dom
4reactive
5toRefs
6watch
7computed
8父子通信
demo全选,全不选
父组件使用v-model传递数据
插槽
插槽demo
declare

1.使用ref响应式数据 .value改值

let num = 20;

//这样子定义的数据不是响应式数据(做不到双向数据绑定，做不到影响界面的变化)

let num = ref(20);

//这个num是Vue内部封装的一个响应式对象数据

// num.value才能真正拿到20这个数据

//所以，以后在js中要操作这种响应式数据，需要.value

//但是模板上依旧使用{{num}}原因是Vue在编译模板的时候已经帮我们用.value获取一次了

2.vscode自定义代码片段

如下配置文件后;输入vue回车可生成模板代码

{
  "demo": {
    "prefix": "vue",
    "body": [
      "<template>",
      "\t",
      "</template>",
      "",
      "<script lang= 'ts' setup> ",	//setup语法糖
      "import {ref } from 'vue'",
      "\t$0",		//$0光标
      "</script>",
      " ",
      "<style lang =\"less\" scoped>",
      "\t",
      "</style>"
    ],
    "description": "自定义的一个vue代码段"
  }
}

3ref获取dom

<template>
<!--通过ref()获取到元素-->
<p ref-"op">这是p际签</p></template>
  
<script lang='ts' setup>
import { ref,onHounted,nextTick } from 'vue'

let op = ref();//获取绑定了ref届性,且值为op的标签
console.log("setup: ",op.value); //undefined
//orMounted(()=>{
//	console.log("onMounted:" , op.value);//挂载完毕之后，才能获取到元素
//}
nextTick(()=>{
  console.log( ""ncxtTick:",op.value);//在下一个dom更新的时候执行（只会调用1次)
}
</script>

4reactive

// ref用来实现基础数据类型的响应式

// reactive用来实现复杂数据类型的响应式;不用调用.value

5toRefs

// toRefs的作用:在解构 reactive()的到的对象的时候，他们解构成响应式数据。

// 解构出来的数据依旧需要通过, value的形式来操作

6watch

 let num = ref(20);

// watch(要监听的响应式数据，数据更新的时候执行的回调函数)

 watch(num, (newVal,oldVal)=>{

 console.log(newVal,oldval);

 })

//------------------------
let obj={
  num:50
}
let objRet = reactive(obj);
//不解构使用()=>
watch((()=>objRet.num,(newval,oldval)=>{
  consolc.log(neweval,oldVal);
}
//------------------------
//在贝面剧新的时绞就立即控听
watchEffect(()=>{
//凡是写在这里的数据，只要发生变化,都会触发这里的代码执行
  console.log(objRet.num);
})

7computed

//返回值就是计算属性的值，接收返回值之后，可以直接在上面展示
let dbNum = computed(()=>{
	return num.value* 2
});

8父子通信

//defineProps可以不用import
//num可以直接在template中使用
defineProps({
  num: {
    type: Number,
    default: 30
  }
})

//---------------
//子传父的时候需要先定义好emit这个方法
const emit = defineEmits<{(event: 'fn') :void}>()
const hdclick = =>{
  //以前通过$emit("自定义事件名",参数)
  emit("fn")
}

demo全选,全不选

<template>
<input type="checkbox" v-model="checkAll">全选/全不选
<ul>
  <li v-for="item, index in list" : key="index">
      <input type="checkbox" v-model="checkList[index]">{{item}
  </li>
</ul>
</template>

script lang='ts' setup>
import { reactive,toRefs,ref，computed } from 'vue'

// let {list,num} = toRefs(reactive({
//   list: [10,20,30,40]，
//   num: 20,
// }))

//优化
//interface DataTypes{
//  list:number[];
//  checkList: boolean[];
//}
//let data =reactive<DataTypes>({

let data = reactive({
  list: [ 10,20, 30,40],
  checkList: [false,false,false,false]
}
let {list, checkList} = toRefs(data);

let checkAll = computed({
  
get(){
// checkAll受checkList这个数组的影响
//checkList包含有一个false，就应该返回false
  return !data.checkList.includes(false)
}
set(newVal:boolean){
console.log("checkAll被修改的时候执行set的代码" , newVal);
//把checkList的所有的值都改成newVal
data.checkList=data.checkList.map(()=>newVal)}
)

父组件使用v-model传递数据

<script lang='ts' setup>
let props = defineProps({  
  num:{
    type: Number,
    default:100
  }
})
const emit = defineEmits<{
// update:固定写法，后面的变量是父组件中v-model:后面的这个变量
(event: 'update:num' ,n: number): void}>()

let n = props.num  //props一般只读不改
const hdclick =( =>{
  n++
  // emit(上面的event的值，要修改成的值)
  emit('update:num',n)
}
</script>

插槽

//子组件
<template>
  <slot name-"btn" title-“哈哈 :mynum=num"></slot>
  <p>子组件</p>
  <slot namem"link"></slot>
</template>

<script lang='ts' setup>
import{ref} from "vue"
let num= ref(30)
</script>

//-----------------父
<template>
//匿名招槽和具名播槽。
  <Child/>
    //<template v-slot:link>
    //</template>
    <template #link>
        <a href="m" >a标签11</a>
    </template>

    //<template v-slot:btn>
    <template #btn="scope"?
    //scope这个对象自定文的,但是一版都叫scope
    //scope专门收集所对应的子组件内部的slot标著身上的标签属性,
    //做为自己的属性(除了name属性)
        <button>{{scope.title1}}-{{scope.mynum}}</button>
    </template>
    //插槽作用域:在父组件中的子组件标签内部,获取子组件的数据-->
  </Child>
</template>

插槽demo

<template>
  <table>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
    <tr v-for="item,index in arr2" :key="index">
      //arr  为unknown飘红
      //法一:让item按K{name:string]这个类显来显示/使用
      //优化item as {name:string1}).name
      <td>{{item .name}}</td>
      <td>{(item as {age: number}).age)}</td>
      <td>
        <slot name="btns" :index-"index"</slot>
      </td>
    </tr>
  </table>
</template>

<script lang='ts' setup>
let props=defineProps{
  arr:{
    type:Arraly,
    default:[]
  }
}

interface UserType{
  name: string;
  age: nunbom;
}
let arr2 =props.arr as UserType[]

</script>
<style scoped>
  table{
    border-collapse: collapse;
  }
  table,th,td{
    border:1px solid :800;
  }
  th,td{
    padding:10px:
  }
</style>
    
//----------------父
    
<template>
  <Table :arrw"state.arr" >
      // {index}解析scope
      <template #btns="{index}">
      //需求:点击这个按钮，获取这一行的数据
      <button @click="hdClick(index)">编辑</button>
      </template>
  </Table>
  <Table :arr-"state.arr" >
    <template #btns>
      <button>编辑</button>
      <button>删除</ button>
    </template>
  </Table>
</template>
    
<script lang='ts' setup>
import Table from "./04-AppChild.vue"
import { reactive } from 'vue"
let state = reactive({
  arr: [
    {
      name:"小明",
      age:18},
    {
      name:"小红",
      age:20
    }
  ]
})
const hdClick = (index:number)=>{console.log(state.arr[index]);
}