VUE3入门笔记

快速上手 | Vue.js

VUE3特性：

1.const 声明变量
特性：声明为一个常量，不能被修改，不可以再次赋值，它的指向是不可以改变的，只能指向某处固定区域，不能再指向其它地方
要求：
① 声明后必须初始化赋值，如：const name=‘aaa’，不可以 const name;
② 常量的含义是指向的对象不能修改，但是可以修改对象中的属性

所以类似

const userName = ref('张三')
userName.value = '李四'

实际上是在给对象userName的属性重新赋值

2.reactive和ref
都是用作定义基本变量的
ref 定义简单的变量，reactive一般定义数组和对象
ref 有.value属性，reactive没有

reactive和ref使用示例代码：

<template>
  <div>
   <p>Text: {{ text }}</p>
    <p>Count: {{ count }}</p>
  </div>
  <button @click="increment">+</button>
  <button @click="reduce">-</button>
</template>

<script>
import { reactive, ref } from 'vue'

export default {
  setup() {
    // 使用 ref 函数创建响应式数据
    var text = ref("这是一个demo")
    const count = ref(0)
    console.log('ref(text)------------', text)
    console.log('ref(0)------------', count)
    // 使用 reactive 函数创建响应式对象
    const state = reactive({
      message: 'Hello, Vue 3!'
    })

    const arr =  reactive([
      1,2,3,4,5,6,7,8
    ])

    const obj =  reactive({
      name: 'demo',
      age: 1
    })
    console.log('reactive1------------', arr, arr[0])
    console.log('reactive2------------', obj, obj.name, obj.age)
    // 定义自定义的方法
    function increment() {
      count.value++
      text.value += count.value
    }

    function reduce(){
      count.value--
      text.value += count.value
    }
    // 返回需要在模板中使用的数据和方法
    return {
      text,
      count,
      state,
      increment,
      reduce
    }
  }
}
</script>

3.provide与inject
不用再一层一层的传递数据
provide可以向所有子孙组件提供数据以及提供修改数据的方法，子孙组件用inject使用数据。

provide与inject使用示例代码：

父页面：

<template>
  <div>
    <p>Parent component</p>
    <p>Message: {{ state.message }}</p>
    <button @click="changeMessage()">Change Message</button>
    <ChildComponent />
  </div>
</template>


<script>
import { provide, reactive } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  name: "ParentComponent",
  components: {
    ChildComponent
  },
  setup() {
    const state = reactive({
      message: 'Hello from parent component!'
    })

    function changeMessage() {
      state.message = 'Message updated!'
    }
    // 在父组件中通过 provide 提供数据给子页面
    provide('messageData', state)
    // 定义父页面的方法
    function parentMethod() {
      alert('Parent method called!')
    }
    // 使用 provide 提供父页面的方法
    provide('parentMethod', parentMethod)
    return {
      state: state,
      changeMessage
    }
  }
}
</script>

<style scoped>

</style>
</script>

子页面：

<template>
  <div>
    <p>Child component</p>
    <p>Message: {{ message }}</p>
    <button @click="callParentMethod()">Call Parent Method</button>
  </div>
</template>



<script>
import { provide, reactive,inject  } from 'vue'
export default {
  name: "ChildComponent",
  components: {
  },
  setup() {
    // 在子组件通过 inject 接收父组件提供的数据
    const messageData = inject('messageData')

    //调用父页面分
    const parentMethod = inject('parentMethod')
    function callParentMethod() {
      parentMethod()
    }

    return {
      message: messageData.message,
      callParentMethod
    }
  }
}
</script>

<style scoped>

</style>