一，vue3 解构获取值双向绑定二。数据监听双向绑定三。冒泡排序

本文介绍: 【代码】一，vue3 解构获取值双向绑定二。数据监听双向绑定三。冒泡排序。

一，vue3 解构 获取值双向 绑定

&lt;template&gt;
    &lt;nav&gt;
      <!--  按钮 --&gt;
        <!-- 绑定事件的弹框  v-on @--&gt;
      <button @click="submit"&gt;弹出</button&gt;<br&gt;
      
        <!-- 、双向绑定 -->
        <input v-model="num"  placeholder="请输入zi" >
        <!-- 文本留言框 -->
        <textarea placeholder="请输入" v-model="numm"></textarea>
        <p>{{num}}---{{numm}}</p>


      <!-- 引用变量 ！取反 -->
      <p v-if="isFalse">我是pt</p>
      <p v-show="!isFalse">我是ps</p>
  
      <ul  v-for="(item,index) in userList" :key="index">
        <!-- 进行遍历 userList   在后边插入值-->
        <!-- :key="index" 唯一标识 必须加  -->
        <li>年龄：{{item.userage}}</li><br>
        <li>名字：{{item.username}}</li><br>
        <li>引用num值--{{num}}</li><br>
        <li>引用msg值--{{msg}}</li><br>
      </ul>

    </nav>
  </template>
  
  <script>
  // import { continueStatement, } from '@babel/types'
  import {reactive,toRefs,  onMounted,} from 'vue'
  export default {
    name:'HomeView',
    setup(){
      const data = reactive({
        isRed:false,
        isTrue:true,
        isFalse:false,
        msg:'msg初始值',
        num:'',
        numm:'',
        // userpone:'',
        userList:[
       
          {
            username:'小红',
            userage:10
          }
          
        ]
      })
  
  
      // 生命周期
      // 渲染后
      onMounted(()=>[
        // 定时器
         setTimeout(()=>{
          //渲染之后修改数据
          data.msg='msg 修改值',
          // 渲染之后加一
          data.num+="num初始值"
          data.numm+="numm初始值"
        },8000)
      ])
  
   
      // onBeforeUpdated(()=>{
      //   // console.log('onBeforeUpdated')
      //   data.num +=1
      // })
  
  
      // 另一种方法的写法
        // const submit =()=>{
        //   alert('nskdh ')
        // }
  
        function submit(){
        const sub = data.num + data.numm

        alert(`${data.num} +${data.numm}`)
        console.log(sub,'打印')
        // return sub
      }
  
    
      return{
        data,
        ...toRefs(data),  //结构数据
        submit,

      }
    } 
  
   
  }
  </script>
  
  <style>
  
  </style>

二。数据 监听 双向 绑定

<template>
  <div>
    个人信息

    <!-- 固定值的增删改查  以及显隐状态-->
    <h2 v-show="preson.name"> 姓名：{{name }}</h2>
    <h2 v-show="preson.age"> 年龄：{{age }}</h2>
    <h2 v-show="preson.add">新增: {{ preson.add }}</h2>
    <!-- 基础 引用 -->
    <h2>工资：{{ preson.job.salarry }}</h2>
    <h2>工作：{{ preson.job.type }}</h2>
    <h2>爱好： {{ preson.job.a.b.c }}</h2>
    <p>{{kk}}</p>

    <!-- button 按钮信息 -->
    <br/>
    <button @click="chenge">修改信息</button>
    <button @click="AddSex">添加信息</button>
    <button @click="del">删除信息</button>
    <button @click="kk++">点击加一</button>

  </div>

</template>

<script>
//   引入 
import { reactive, ref , watchEffect, toRefs,} from 'vue'
export default {
  // 定义文件名称
  name: 'App',
  setup() {
   const kk = ref (0)
    // 创建对象reactive类型 
    let preson = reactive({
      name: '周阿狗',
      age: 23,
      job: {
        salarry: '10k',
        type: '前端菜狗',
        a: {
          b: {
            c: '滑雪，旅游'
          }
        }
      }
    })

    

    // // watch监听   ref
    // watch(kk,(newValue,oldValue)=>{
    //   console.log('kk变化了',newValue,oldValue)
    // })

    // // watch监听 reactive  
    // 新数据和旧数据会变得一样 如果非要用旧数据  参考上边的ref
    // watch(preson,(newValue,oldValue)=>{
    //   console.log('preson',newValue,oldValue)
    // })

    // watchEffect 默认上来就监听数据  
    watchEffect(()=>{
      const newage =  preson.age

      console.log("监听数据" ,newage)
    })




    // 修改  
    function chenge() {
      // reactive 类型 直接引用修改即可
      preson.job.a.b.c = "修改后爱好 摆烂"
      // preson.age='scsdsfs'//变成nan
      preson.age='修改后年龄 108岁 '//变成nan

     
    }

    // 添加 
    function AddSex() {
       // reactive 类型 直接引用添加
      preson.add = '新增值'

    }

    // 删除
    function del() {
      delete preson.name

    }
   

    return {
      preson,
      chenge,
      AddSex,
      del,
      kk,
      // 减少preson  解构
      ...toRefs(preson)
      
    
    }

  }



}
</script>

三。冒泡排序

<template>
    <div>
      <p>{{ kla }}</p>
    </div>
  </template>
  <script>
  import { ref } from 'vue';
  export default {
    setup() {
        const kla= ref([9, 5, 8, 9, 3, 8, 4, 2, 5, 6, 1, 7])
      const kl = ref([9, 5, 8, 9, 3, 8, 4, 2, 5, 6, 1, 7])
      // 冒泡排序  从小到大
      function kkkkkk(arr) {
        for (var i = 0; i <= arr.length - 1; i++) {      //外层循环
          for (var j = 0; j < arr.length - i - 1; j++) {  //内层循环
            if (arr[j] > arr[j + 1]) {   //判断 当前的j 是否大于 j+1
              var temp = arr[j];        //如果大于  那就就把 arr[j]  存在一个新的 temp 队列中
              arr[j] = arr[j + 1];      //判断  arr[j] 是否等于 arr[j+1]
              arr[j + 1] = temp;       //如果 两个数字一样  那就存进 队列
            }
          }
        }
        return arr;                    //返回 arr
      }
      var arr1 = kkkkkk(kl.value);    //带入数组
      console.log(arr1);              //输出
   
      // 冒泡排序  从大到小
      function kkkk(arr) {
        for (var i = 0; i <= arr.length - 1; i++) {
          for (var j = 0; j < arr.length - i - 1; j++) {
            if (arr[j] < arr[j + 1]) {
              var temp = arr[j];
              arr[j] = arr[j + 1];
              arr[j + 1] = temp;
            }
          }
        }
        return arr;
      }
      var arr1 = kkkk(kl.value);
      console.log(arr1);
   
   
      return {
        kl,
        kla,
        kkkkkk,
        kkkk
      }
    }
  }
  </script>
  <style></style>