1. 前言

vue3也是时候梳理了,千里之行始于足下
更详细的 vue3简介就不说了 直接上干货

---

2. 脚手架

vue/cli 4x以上
vue create 项目名
配置 可以选择默认 或者自定义 这里选择自定义配置 Manually select feature

1.png

---

3. props 用法

3.1 基本写法

  props: {
    msg: String
  },

---

3.2 模板

  <h1> 属性传值: {{ msg }}</h1>
  <input type="text" v-model="msg">
  <hr />

---

3.3 传值

  <HelloWorld   v-if="showView === 1" msg="Welcome to Your Vue3 App"/>

---

3.4 分析

这块props其实和v2没啥区别

---

4. data

4.1 数据

  data() {
    return {
      name: "data "
    }
  },

---

4.2 模板

<h1>data: {{name}} </h1>
<input type="text" v-model="name">
<hr />

---

4.3 分析

和v2区别也不大

---

5. setUp 初识

这个 v3新增的 组合式API 的一个重点,简单来玩下

5.1 主要代码

  setup(){
                // return {
                //默认不是响应式数据
                //     msgSet:"这是好消息"
                // }
                const state = reactive({
                    msgSet:"这才是响应式数据"
                })
                //暴露给模板使用 这里不能展开,会破坏内部结构
                return  {state}
            },

---

5.2 分析

1.这个 setup 可以返回数据
2.这个返回的数据默认不是响应式数据
3.响应式数据需要做单独的处理 reactive

import {reactive,computed} from "vue";

4.返回的数据 必须是原来的结构 ,不能进行...展开,会破坏内部结构,导致不是响应式数据

---

5.3 使用 数据

<h1>setUp: {{state.msgSet}} </h1>
<input type="text" v-model="state.msgSet">
<hr />

---

5.4 参数1 props

        setup(props) {
            console.log("---------", props)
            // 不是响应式数据了 
            // return{
            //   msgSet:"新的写法"
            // }
            //  ****************** 就是原来的 data
            const state = reactive({
                msgSet: "响应式数据",
                count: 9
            })
            // ****************  计算属性
            const doubleCounter = computed(() => {
                return state.count * 2
                // return  state.msgSet.length
            })
            // 暴露出去 使用
            return {
                state,
                doubleCounter
            }
        },

---

  <HelloWorld   v-if="showView === 1" msg="Welcome to Your Vue3 App"/>

1.png

---

5.5 参数2

  setup(props, { attrs, slots, emit }) {
    ...
  }

---

6. computed 计算属性

6.1 代码

    const state = reactive({
                msgSet: "响应式数据",
                count: 9
            })
            // ****************  计算属性
            const doubleCounter = computed(() => {
                return state.count * 2
                // return  state.msgSet.length
            })
                     // 暴露出去 使用
            return {
                state,
                doubleCounter
            }

---

6.2 模板使用 数据

        <hr />
        <p>{{state.count}}</p>
        <p>{{doubleCounter}}</p>

---

6.3 分析

1.这里面其实是2个例子
2.1个是 数字 2倍的计算
3.1个是动态计算字符串长度
4.使用的时候注意,计算属性 直接 rerturn就行,不用包裹在state里

---

---

参考资料

v2和v3响应式原理对比

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉