vue3

setup函数

  <div>叫哥哥
    <button @click="btn">点一点</button>
  </div>
</template>

<script>
export default {
name:'',
// setUp特征
// 2vue没有this
// 3必须return {}
// 执行时机比beforeCreate还要早
setup(){
  // console.log(this,888);
  const btn=()=>{
 console.log(111)
  }
  return {btn}
  
}
}
</script>

<style>

</style>

setup语法糖

<template>
  <div>setup语法糖哦不需要return
    <button @click="btn">好好学习天天向上</button>
  </div>
</template>

<script setup>
 console.log('啦啦啦',this)
const btn=()=>{
  console.log('我是爱你的')
 }
</script>

<style>

</style>

reactive函数

reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据
<template>
 <div>
  御剑乘风来,除魔天地间!===Reactive===={{obj.count}}
  <button @click="btn">我真的开心的很</button>
 </div>
</template>
           
<script>
//在使用reactive函数记得引入哦
import { reactive } from '@vue/reactivity'
export default{
    name:'',
    setup(){
     const obj=reactive({
       count:1
     })
     const  btn=()=>{
    //  打印一下
      console.log('btn')  
      obj.count+=2
      console.log(obj,77)
     }
     return {obj,btn}
    }
}
</script>
<style lang='less'  scoped>
 
</style>

<template>
  <div>
    叫哥哥====vue3==toRef==={{obj.count}}==={{count}}
    <button @click="btn">点一点更开心</button>

  </div>
</template>

<script>
// 导入
import {reactive,toRef} from 'vue'
export default {
 name:'',
 setup(){
  let obj=reactive({
    count:1
  })
  // toRef('目标响应对象 目标对象)
  let count =toRef(obj,'count')
  const btn=()=>{
    // console.log(count,88)
    //当我点击的时候拿到value加5
    count.value += 5
  }
  return {obj,count,btn}
 }
}
</script>

toRef函数

toRef是函数，转换**响应式对象**中**某个**属性为单独响应式数据，并且**值是关联的
<template>
  <div>
    叫哥哥====vue3==toRef==={{obj.count}}==={{count}}
    <button @click="btn">点一点更开心</button>

  </div>
</template>

<script>
// 导入
import {reactive,toRef} from 'vue'
export default {
 name:'',
 setup(){
  let obj=reactive({
    count:1
  })
  // toRef('目标响应对象 目标对象)
  let count =toRef(obj,'count')
  const btn=()=>{
    // console.log(count,88)
    //当我点击的时候拿到value加5
    count.value += 5
  }
  return {obj,count,btn}
 }
}
</script>

<style>

</style>

ref

<template>
 <div>
  御剑乘风来,除魔天地间!===vue3===ref==={{count}}===={{str}}==={{btn}}
  <button @click="btn">小齐齐</button>
 </div>
</template>
           
<script>
import {ref} from 'vue'
export default{
    name:'',
    setup () {
       let count =ref(1)
       let str=ref('rose')
       let flag=ref(false)
       const btn=()=>{
      
        count.value+=3,
        str.value='dd',
        flag.value=true
       }
       return {count,btn,str}
    }
}
</script>
<style lang='less'  scoped>
 
</style>

 <div>
  御剑乘风来,除魔天地间!===vue3====refDom
  <h2 ref="dom" :style="{color:red}">我是h3</h2>
 </div>
</template>
           
<script>
import {ref,onMounted} from 'vue'
export default{
    name:'',
    setup () {
       const dom=ref('null')
       const red=ref('red')
       onMounted(()=>{
        console.log(dom.value)
       })
    return {dom,red}
    }
}
</script>
<style lang='less'  scoped>
 
</style>

<template>
 <div>
  御剑乘风来,除魔天地间!===vue3 {{obj.x}}===={{obj.y}}
 </div>
</template>
           
<script>
/**
* @description:
* @param {type} 
* @return: 
步骤：
1定义一个响应式对象 保存坐标并展示
2绑定事件===鼠标移动事件
3获取移动事件的事件对对象===获取坐标
4需要将获取的坐标赋值给响应式对象
*/
import {reactive,onMounted} from 'vue'
export default{
    name:'',
    setup () {
     const obj=reactive({
      x:0,
      y:0
     })
     onMounted(()=>{
      window.addEventListener('mousemove',(e)=>{
      //获取我鼠标位置
        obj.x=e.pageX
        obj.y=e.pageY
      })
     })
     return {obj}
    }
}
</script>
<style lang='less'  scoped>
 
</style>

ref和computed实现数据求和

<template>
 <div>
  御剑乘风来,除魔天地间!===vue3==={{total}}===={{tota2}}
 </div>
</template>
           
<script>
import {ref,computed} from 'vue'
export default{
    name:'',
    setup () {
        const arr=ref([1,4,50])
        const total=computed(()=>{
          return arr.value.reduce((sum,item)=>sum+item,0)
        })
        const tota2=computed(()=>{
          return 'total2'
        })
        return {total,tota2}
    }
}
</script>
<style lang='less'  scoped>
 
</style>

<template>
 <div>
  御剑乘风来,除魔天地间!===vue3====refDom
  <h2 ref="dom" :style="{color:red}">我是h3</h2>
 </div>
</template>
           
<script>
import {ref,onMounted} from 'vue'
export default{
    name:'',
    setup () {
       const dom=ref('null')
       const red=ref('red')
       onMounted(()=>{
        console.log(dom.value)
       })
    return {dom,red}
    }
}
</script>
<style lang='less'  scoped>
 
</style>

watch监听

<template>
 <div>
  御剑乘风来,除魔天地间!===watch===={{obj.count}}
  <button @click="btn">小齐齐</button>
 </div>
</template>
           
<script>
import {reactive, watch} from 'vue'
export default{
    name:'',
    setup () {
      const obj=reactive({
        count:1
      })
      const obj2=reactive({
        count:4
      })
      const btn=()=>{
        obj.count+=5
      } 
      // 1监听响应式对象中的属性 watch(对象看()=>{})

      // watch(obj,(newNal)=>{
      //   console.log(newNal.count,111)
      // })


      //2 监听响应式对象中的属性 watch(对象，*（=》{})
      // 必须是箭头函数 或者不会触发
      // watch(()=>obj.count,(newNal)=>{//注意，此次监听不会触发
      //   console.log(11)
      // })


       // 3可以监听多个数据
      //  watch([obj,obj2],()=>{
      //   console.log(111)
      //  },{
      //   deep:true //可以写deep也可以不写
      //  })


      //方法4 监听对象中的属性
      watch(()=>obj,()=>{
         console.log(11484891)
      },{
        immediate:true,//立即执行
        deep:true //必须写 深度监听
      })
      //总结 直接监听对象不需要写deep.监听的是箭头函数返回对象就写deep



      return {obj,btn}
    }
}
</script>
<style lang='less'  scoped>
 
</style>

watchEffect

<template>
 <div>
  御剑乘风来,除魔天地间!===vue3===
  <button @click="btn">叫齐哥</button>
 </div>
</template>
           
<script>
import {ref,watchEffect} from 'vue'
export default{
    name:'',
    setup () {
       const obj=ref(null)
      const btn=()=>{
        count.value+=7
      }
      watchEffect(()=>{
        console.log('ss')
      })
    return {obj}
    }
}
</script>
<style lang='less'  scoped>
 
</style>

provide inject

<template>
 <div>
  御剑乘风来,除魔天地间
   <Son></Son>
 </div>
</template>
           
<script>
// 引入组件
// provide中返回值是一个对象，相当于将对象中的内容注入到子孙组件
import {provide} from 'vue'
import Son from './son.vue'
export default{
    name:'',
    components:{Son},
    setup () {
     provide('msg',123)
    }
}
</script>
<style lang='less'  scoped>
 
</style>



<template>
 <div>
  御剑乘风来,除魔天地间!===vue3rrrr
 </div>
</template>
           
<script>
//子孙组件使用inject: [ 由provide键名组成的数组 ] ，来获取父级组件的方法或者其他属性
import {inject} from 'vue'

export default{
    name:'',
    setup () {
       const  m=inject('msg')
       console.log(m,'55')
    }
}
</script>
<style lang='less'  scoped>
 
</style>