1.初识setUp的使用

简单介绍下面的代码功能：
使用ref函数，去使用监听某一个变量的变化，并且把它渲染到视图上。
setUp函数是组合API的入口函数。这个是非常重要的。
setUp可以去监听变量的变化哈！我们将会利用它
ref 在vue中内置，需要导入。

<template>
 <div>{{ countNum}}</div>
 <button @click="handerFunc">按钮</button>
</template>
<script>
import {ref} from 'vue'
export default {
  name: 'App',
  setup() {
    // 这一句表示的是定义了一个变量count。这个变量的初始值是100
    let countNum=ref(100);

    // 在组合API中，如果想定义一个方法，不用定义到methods中去。直接定义就可以了
    function handerFunc(){
      // console.log(countNum);//countNum是一个对象
      countNum.value += 10;
    }
    //在组合api中定义的方法，或者变量。如果外界需要使用，那么必须通过 return  {aaa,func} 的方式暴露出去
    return { countNum ,handerFunc}
  }
}
</script>

2认识reactive的使用

ref函数只能够去监听简单类型的数据变化。
不能够去监听，复杂类型的变化(数组、对象)。
所以我们的主角reactive就出现了。
setup 中的函数会自动执行一次。

<template>
 <div>
   <ul>
     <li v-for="item in satte.arr" :key="item.id">
       {{item.name  }}
     </li>
   </ul>

 </div>
</template>
<script>
import {reactive} from 'vue'
export default {
  name: 'App',
  setup(){
    console.log("setUp会自动执行的")
    // ref函数的注意点：
    // ref函数只能够去监听简单类型的数据变化，不能够去监听，复杂类型的变化(数组、对象)
    // reactive  方法里面是一个对象
    let satte=reactive({
       arr:[
         {name:"司藤",id:'0011'},
         {name:"皮囊之下",id:'0011'},
         {name:"百岁之约",id:'0012'},
         {name:"三生三世",id:'0013'},
       ]
    })
    return { satte }
  },
}
</script>

3使用reactive

实现视图的删除

<template>
 <div>
   <ul>
     <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
       {{item.name  }}
     </li>
   </ul>

 </div>
</template>
<script>
import {reactive} from 'vue'
export default {
  name: 'App',
  setup(){
    let satte=reactive({
       arr:[
         {name:"司藤",id:'0011'},
         {name:"皮囊之下",id:'0011'},
         {name:"百岁之约",id:'0012'},
         {name:"三生三世",id:'0013'},
       ]
    })
    // 删除被点击的元素
    function del(index){
      for(let i=0;i<satte.arr.length;i++){
        if(index==i){
          satte.arr.splice(i,1)
        }
      }
    }
    return { satte, del}
  },
}
</script>

4将删除的逻辑分离出去

形成一个单独的模块

<template>
 <div>
   <ul>
     <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
       {{item.name  }}
     </li>
   </ul>

 </div>
</template>
<script>
import {reactive} from 'vue'
export default {
  name: 'App',
  setup(){
    // onlyDelLuoJi() 方法中含有一个数组 和一个方法；类似于解构
    let {satte,del }=onlyDelLuoJi();
    
    // 暴露给外界使用
    return { satte,del}
  },
}

function onlyDelLuoJi(){
   let satte=reactive({
       arr:[
         {name:"司藤",id:'0011'},
         {name:"皮囊之下",id:'0011'},
         {name:"百岁之约",id:'0012'},
         {name:"三生三世",id:'0013'},
       ]
    })
    // 删除被点击的元素
    function del(index){
      for(let i=0;i<satte.arr.length;i++){
        if(index==i){
          satte.arr.splice(i,1)
        }
      }
    }
    // 将数据satte 和方法 del 暴露出去
    return { satte,del }
}
</script>

5. 实现添加功能

事件之间传递参数

<template>
 <div>
   <div>
      <input type="text" v-model="addobj.watchTv.name">
      <button @click="addHander">添加</button>
   </div>
   
   <ul>
     <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
       {{item.name  }}
     </li>
   </ul>

 </div>
</template>
<script>
import {reactive} from 'vue'
export default {
  name: 'App',
  setup(){
    // onlyDelLuoJi() 方法中含有一个数组 和一个方法；类似于解构
    let {satte,del }=onlyDelLuoJi();
    
    // 传递参数satte 是onlyDelLuoJi函数中提供的satte。进行传递
    let {  addobj,addHander  }=OnlyaddHander(satte);

    // 暴露给外界使用
    return { satte,del,addobj, addHander}
  },
}

//添加功能模块
function OnlyaddHander(satte){
  console.log('初始化添加',satte)
    let addobj=reactive({
        watchTv:{
          name:"",
          id:""
        }
     });

    function addHander(){
      // 重置清空 错吴做法
        // satte.arr.push(addobj.watchTv)
        // addobj.watchTv.name = ""; 
        // addobj.watchTv.id = "";
        

          // 正确做法
        let oldobj = Object.assign({}, addobj.watchTv)
        satte.arr.push(oldobj)
    }
    return { addobj,addHander }
}

//删除功能模块
function onlyDelLuoJi(){
  console.log('删除初始化')
   let satte=reactive({
       arr:[
         {name:"司藤",id:'0011'},
         {name:"皮囊之下",id:'0011'},
         {name:"百岁之约",id:'0012'},
         {name:"三生三世",id:'0013'},
       ]
    })
    // 删除被点击的元素
    function del(index){
      for(let i=0;i<satte.arr.length;i++){
        if(index==i){
          satte.arr.splice(i,1)
        }
      }
    }
    // 将数据satte 和方法 del 暴露出去
    return { satte,del }
}
</script>

6 将他们抽离成单独的文件

我们想在想将添加删除相关的逻辑，单独抽离成一个文件。
add.js 是添加相关的逻辑
del.js 是删除的相关逻辑

import { reactive } from "vue"
function OnlyaddHander(satte){
  console.log('初始化添加',satte)
    let addobj=reactive({
        watchTv:{
          name:"",
          id:""
        }
     });
    function addHander(e){
        // 重置清空 错吴做法
        // satte.arr.push(addobj.watchTv)
        // addobj.watchTv.name = ""; 
        // addobj.watchTv.id = "";
        // 正确做法
        let oldobj = Object.assign({}, addobj.watchTv)
        satte.arr.push(oldobj)
        e.preventDefault();
    }
    return { addobj,addHander }
}
export default  OnlyaddHander

adel.js

import {reactive } from "vue"
function onlyDelLuoJi() {
  console.log('删除初始化')
   let satte=reactive({
       arr:[
         {name:"司藤",id:'0011'},
         {name:"皮囊之下",id:'0011'},
         {name:"百岁之约",id:'0012'},
         {name:"三生三世",id:'0013'},
       ]
    })
    // 删除被点击的元素
    function del(index){
      for(let i=0;i<satte.arr.length;i++){
        if(index==i){
          satte.arr.splice(i,1)
        }
      }
    }
    // 将数据satte 和方法 del 暴露出去
    return { satte,del }
}
export default  onlyDelLuoJi

主文件

<template>
 <div>
   <div>
      <input type="text" v-model="addobj.watchTv.name">
      <button @click="addHander">添加</button>
   </div>
   
   <ul>
     <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
       {{item.name  }}
     </li>
   </ul>

 </div>
</template>
<script>
import onlyDelLuoJi from "./components/del"
import OnlyaddHander from "./components/add"
export default {
  name: 'App',
  setup(){
    // onlyDelLuoJi() 方法中含有一个数组 和一个方法；类似于解构
    let {satte,del }=onlyDelLuoJi();
    
    // 传递参数
    let {  addobj,addHander  }=OnlyaddHander(satte);

    // 暴露给外界使用
    return { satte,del,addobj, addHander}
  },
}
</script>

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JavaScript中用canvas怎么做圆形流水的特效

  本文实例为大家分享了canvas实现圆形流水动画的具体代码，供大家参考，具体内容如下

• canvas交互怎样实现的拖拽、旋转、缩放效果

  目录正文拖拽旋转缩放小结正文到目前为止，我们已经能够对物体进行点选和框选的操作了，但是这还不够，因为并没有什么实际性的改变，并且画布看起来也有点呆板，所以这个章节的主要目的就是让画布中的物体活起来，其实就是增加一些常见的交互而已啦????，比如拖拽、旋转和缩放。这是这个系列最重要的章节之一，希望能够对你有所帮助。拖拽先来说说

• 常用的ES6有哪些，用法是怎样的？

  本篇文章带大家聊聊ES6，带你30分钟熟练使用最常用的ES6，还不学是等着被卷死？

• jQuery Canvas如何实现图片验证码，具体代码是什么

  这篇文章主要为大家详细介绍了jquery canvas绘制图片验证码实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• 用Node怎样做有模糊查询功能的搜索框？

  在实际的应用中用搜索框查询时，经常会需要进行模糊查询操作，因此这篇文章就主要给大家分享怎样用Node实现有模糊查询功能的搜索框，下文有实现步骤和代码，感兴趣的朋友就接着往下看吧。