每日小节-跟着文档学 vue3vue3学习笔记 2022年3月23日17:04:19 核心功能声明式渲染: 通过js输

vue3学习笔记 2022年3月23日17:04:19

核心功能

声明式渲染: 通过js输出HTML
响应式: js状态改变响应式改变dom

快速开始

npm init vue@latest
cd  
npm i
npm run dev
npm run build

创建根组件, (main.ts中)

import { createApp } from 'vue'

// 从一个单文件中导入根组件
import App from './App.vue'
import router from './router'

// 用createApp创建应用实例
const app = createApp(App)

app.use(router)

// 调用, 在index.html中引入main.ts, '#app'指向index.html可以为id也可以是dom名或class名
app.mount('#app')

第一个vue页面

选项式: 可以使用类似vue2的写法初始化数据添加方法等(script标签不要加 setup 属性)

<script lang="ts">
  export default {
    data() {
      return {
        count: 1
      }
    },
    mounted() {
      this.count = 2
    }
  }
</script>
<template>
  <div>{{ count }}</div>
</template>

组合式 reactive

使用 reactive 创建响应式数据(script标签需添加setup属性)

  <script setup lang="ts">
    import { reactive } from 'vue'

    const state = reactive({ count: 0 })
  </script>

  <template>
    <button>{{ state.count }}</button>
  </template>

组件模板中使用, 在setup()函数中定义并返回, 不要在script标签不添加 setup 属性

  <script setup lang="ts">
  import { reactive } from 'vue'

  export default {
    setup () {
      // 可以初始化数据
      const state = reactive({
        count: 2
      })

      // 也可以定义方法
      const increment = () => {
        state.count--
      }

      return {
        state,
        increment
      }
    }
  }
  </script>

  <template>
    <button @click="increment()">
      {{ state.count }}
    </button>
  </template>

reactive 的局限性
1. 仅对对象类型有效(对象、数组、Map和Set集合类型), String、Number、Boolean基础类型无效
2. vue的响应式根据属性进行跟踪, 不可以随意的替换响应式对象
```
  let state = reactive({ count: 2 })
  stste = reactive({ count: 1 }) // 是无效的

  let { count } = state
  count++ // 也是无法响应式改变
```

ref() 定义任意值类型响应式变量

  import { ref } from 'vue'

  const state = ref(0)

  state.value++

  // dom, 不需要 .value
  <template>
    <div>{{ state }}</div>
  </template>

ref被传递给函数或对象结构, 响应性不会丢失

  let obj = {
    foo: ref(1),
    son: ref(2)
  }

  function add() {
    obj.foo.value++
    }

  // dom, 不需要 .value
  <template>
  <div @click="add()">{{ obj.foo }}</div>
  </template>

==$ref demo报错==