一个 React 开发的 Vue3 学习记录

1、页面代码结构

一个 vue 文件主要有三部分组成：

1. <script> 标签，用于放置逻辑的地方，包括数据，处理函数，需要导入的文件等等；

1. <template> 标签，用于显示界面，也就是 HTML 代码；

1. <style> 标签，用于放置界面所需要的样式定义。

下面来看一个简单的例子：

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count ++
    }
  }
}
</script>

<template>   <button @click="increment">count is: {{ count }}</button>
</template>
<style>
  .button {
    background-color: #ccc;
    padding: 20px;
    color: white;
    font-size: 48px;
    border-radius: 20px;
  }
</style>

其实也可以简单的把这三部分理解为“逻辑处理”，“页面布局”，“页面样式”，这三要素是构成网页必不可少的三要素，只要稍微复杂一点的网页，这三要素都必不可少，而 vue 都给我们安排好了，只要写进对应的位置，整个代码的结构就是相对清晰的，当然如果都这样了还是把样式或逻辑写到界面上就没办法了。

2、表单绑定

在传统的思维里，如果你想要得到表单中的值，那么你就得监听对应的事件，然后从事件中拿到值，但是在 vue 中有了双向绑定，只要告诉 vue 你绑定的值，那么当表单中对应控件的值发生改变后就会相应的改变其对应的数据，看下面例子：

<script>
export default {
  data() {
    return {
      text: ''
    }
  }
}
</script>

<template>
  <input v-model="text" placeholder="Type here">
  <p>{{ text }}</p>
</template>

其中 text 就是绑定到 input 标签上的属性，当 input 的值发生改变的时候，对应的 text 的值也会发生改变，从而依赖于 text 显示的 p 标签自然而然的会实时显示最新输入的文本。如果没有双向绑定，那么我们会像下面这样编写代码：

<script>
export default {
  data() {
    return {
      text: ''
    }
  },
  methods: {
    onInput(e) {
      this.text = e.target.value
    }
  }
}
</script>

<template>
  <input :value="text" @input="onInput" placeholder="Type here">
  <p>{{ text }}</p>
</template>

在 react 中要想拿到 input 中的值也需要像上面那样处理。本身活是没有变的，只是 vue 帮我们做了一些总是“这样”的活。

3、计算属性 computed

相当于 react 中的 useMemo ，当依赖项发生改变时会自动调用 computed 中对应的函数，我们先看看这个方程：y = 2x + 5z ，其中 y 相当于 computed ，而 x 和 z 则是依赖项。下面我们模拟这样的公式：

<script lang="ts">
export default {
    data() {
        return {
            x: 0,
            z: 20,
        };
    },
    computed: {
        y() {
            return 2 * this.x + 5 * this.z;
        },
    },
};
</script>

<template>
    2*
    <input v-model="x" />
    <br />
    5*
    <input v-model="z" />
    <br />
    <span>{{ y }}</span>
</template>

1. 侦听器 watch

这个是专门用来监听 data 中数据变化的属性，比如我们请求接口依赖的数据发生了变化，这个时候就需要重新请求接口，比如搜索，当文本框中的文本发生了改变就需要重新请求接口。

<script lang="ts">
export default {
    data() {
        return {
            search: '',
        };
    },
    methods: {
        async requestData() {
            console.log('请求接口');
        },
    },
    watch: {
        search() {
            this.requestData();
        },
    },
};
</script>

<template>
    <input v-model="search" placeholder="请输入要搜索的内容" />
</template>

这个跟 react 中的 useEffect 的作用差不多，只要我们依赖项填写成对应的依赖即可。

1. 生命周期

简单描述就是：创建+加载+更新+卸载，而每一个都对应两个回调函数。在 react 中也有类似的生命周期函数，只不过目前我已经全面拥抱 hooks

1. 组件

在 vue 中要使用组件，需要先声明要使用的组件，也就是除了导入以外，还需要在属性 components 中声明：

import ChildComp from './pages/CountChild.vue'

export default {
  components: {
    ChildComp
  },
  // ...
}

6.1 组件定义 props

在组件中定义属性 props ，要暴露给外面的属性写到这里面：

export default {
  props: {
    msg: String,
    count: Number
  },
  // ...
}

其中属性名就是暴露给外面的名称，值则是这个属性的类型；除了基本数据类型外，也可以是引用类型，还包括方法；如果传入的类型和定义好的类型不匹配，那么就会出现警告。

6.2 组件传值（父 -> 子）

如果是直接传递固定的值，那么只需要这样：

<ChildComp msg="greeting" />

这样子组件就会显示这个字符串：greeting，如果你想传入变量，那么就需要在属性前添加 : ，这样就会自动将里面的值当做变量来处理：

<ChildComp :msg="greeting"  />

这里就会使用 greeting 定义的值，这里我写的值为 Hello from parent。

6.3 组件传值（子 -> 父）

子组件给父组件传值可以通过给子组件传递方法作为属性，然后子组件在调用函数时将需要给父组件的值通过参数传递。

// 这是在子组件中执行传递过来的函数
<h1 @click="testFunc(1)">{{count}}</h1>

// 这是父组件传递过来的函数
export default {
  components: {
    ChildComp
  },
  // ...
  methods: {
    // ...
    test(param) {
      console.log("传递给子组件的函数", param)
    }
  }
}
<ChildComp :testFunc="test" />

我们可以看到打印的结果是： 传递给子组件的函数 1 。

通过 Emits 来传递数据给父组件：

// 子组件中定义 emits 属性，这里面是定义事件名称的
export default {
  emits: ['h2Click'],
  // ...
}

怎么触发呢，在要触发的地方调用：

this.$emit("h2Click", "hello world")

其中第一个参数是事件名称，第二个参数是需要传递的值。在父组件中监听事件的变化：

<ChildComp @h2Click="(msg) => greeting = msg"  />

其中 h2Click 就是定义的事件名称，里面就是一个回调函数。

总结 子组件给父组件传值有以下几种：

1. 父组件给子组件传函数作为 props ；

1. 通过事件来完成，子组件负责触发事件，父组件负责监听事件。

6.4 slot 插槽

这个相当于 react 中的 children ，但是在子组件中使用上有区别：

// react 中
<>{children}</>
// vue 中
<slot><!-- 当不传入时显示的默认值 --></slot>

至于父组件中怎么调用就很简单了，跟 react 一模一样：

<ChildComp>
  <h1>这是父组件的h1</h1>
</ChildComp>