vue3的学习历程

新增特性Composition（组合） API

setup

• 在初始化时执行一次
• 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用

<template>
  <div id="nav">
    哈哈，又帅了。{{number}}
  </div>
</template>
<script>
export default {
  name:'App',
  setup() {
    let number = 10   //这里的数据不是响应式数据
    return{
      number
    }
  }
}
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-alQ0AWIb-1656494800457)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220629133230916.png)]

ref 和 reactive

1. ref

   • 定义基本类型的响应式数据

   • <template>
       <div id="nav" @click="update">
         哈哈，又帅了。{{number}}
       </div>
     </template>
     <script>
     import { ref } from '@vue/reactivity'
     export default {
       name:'App',
       setup() {
         const number = ref(0) //ref是一个函数，作用时定义一个相应式的数据,返回的式一个Ref的对象，对象中有一个value属性，如果要对数据进行操作，则需要使用到这个属性。
         const update = () =>{
           number.value++
         }
         return{
           number,
           update
         }
       }
     }
     

2.reactive的使用

• 定义复杂类型的响应式数据

  <template>
    <ul>
      <li>{{user.name}}</li>
      <li>{{user.age}}</li>
      <li>{{user.wife}}</li>
    </ul>
    <button @click="updateuser">anniu</button>
  </template>
  <script>
  import { reactive, ref } from '@vue/reactivity'
  export default {
    name: 'App',
    setup() {
      let obj = {
        name: '梓恒'
        , age: 20
        , wife: {
          name: '小佳'
          , age: 18
          , cars:['12','45','56']
        }
      }
      //reactive,返回的是一个proxy的代理对象，被代理的目标对象就是这里的obj对象。
      const user = reactive(obj)
      //methods
      const  updateuser= ()=> {
        user.name = '任得旺'
        user.age = 23
        user.wife = 'xiaoxin'
      }
      return {
        user,
        updateuser
      }
    }
  }
  </script>
  

• setup的返回值

  • 一般都返回一个对象: 为模板提供数据, 也就是模板中可以直接使用此对象中的所有属性/方法
  • 返回对象中的属性会与data函数返回对象的属性合并成为组件对象的属性
  • 返回对象中的方法会与methods中的方法合并成功组件对象的方法
  • 如果有重名, setup优先
  • 注意:
  • 一般不要混合使用: methods中可以访问setup提供的属性和方法, 但在setup方法中不能访问data和methods
  • setup不能是一个async函数: 因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性数据

• setup的参数

  1. props

     props参数是一个对象，里边有父级组件向子集组件传递的参数（这个参数指的是在子组件中的props中接收过的参数）
     

  2. context（attrs, emit, slots）

     context参数由attrs（里边存放的是父组件向子组件传递的参数，但是没有在props中声明的参数）,emit方法（分发式事件），slots（插槽）组成，
     <child :msg = 'number' msg2='456' @cli='clibtn'/>
      console.log(context.attrs.msg2);
     

     emit
     --------------------------------------------父组件------------------------------------------
     <template>
     <h1>这里是父级组件</h1>
     <dir></dir>
     <child :msg = 'number' msg2='456' @cli='clibtn'/>
     </template>
     <script>
     import { ref } from '@vue/reactivity';
     import  child  from "./views/child.vue";
     export default {
     components:{child},
     setup(){
       let number = ref('jkl')
       function clibtn (txt){
         number.value+= txt
       }
       return{
         number,
         clibtn
       }
     }
     }
     </script>
     ----------------------------------------子组件----------------------------------------------
     :<template>
       <h1>这里是child组件{{msg}}</h1>
       <button @click="cliBtn">自定义事件</button>
     </template>
     
     <script>
     export default {
     name:'child',
     props:['msg'],
     setup(props, context) {
         //props参数是一个对象，里边有父级组件向子集组件传递的参数（这个参数指的是在子组件中的props中接收过的参数）
         //context参数由attrs（里边存放的是父组件向子组件传递的参数，但是没有在props中声明的参数）,emit方法（分发式事件），slots（插槽）组成，
         console.log(context.attrs.msg2);
         function cliBtn (){
             context.emit('cli','12')
         }
         return{
             cliBtn
         }
     }
     }
     </script>
     

vue3中的数据传参

1. 使用props

<template>
<h1>这里是父级组件</h1>
<child :msg = 'number'/>
</template>
<script>
import { ref } from '@vue/reactivity';
import  child  from "./views/child.vue";
export default {
components:{child},
setup(){
  let number = ref('jkl')
  return{
    number
  }
}
}
</script>

:<template>
  <h1>这里是child组件{{msg}}</h1>
</template>

<script>
export default {
name:'child',
props:['msg']
}
</script>

未完待续。。。。。