tips: vue2.0 和 vue3.0的区别

没有data methods computed 那些内容了而是用setup()函数代替
<template>里的“根元素”不再只能是一个了

一. setup() 函数

现在, 我们没有必要把数据写在 data里把方法写在methods 里了

我们把数据和方法写在setup里, 再通过return 暴露出去

<template>
  <h2>请选择服务员:</h2>
  <div>
    <button
      v-for="(name, index) in girls"
      v-bind:key="index"
      @click="selectGirlFun(index)"
    >
      {{ index }}:{{ name }}
    </button>
  </div>
  <h2>您选择了:{{ selectedGirl }}!!</h2>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "App",
  setup() {
    const girls = ref(["貂蝉", "王昭君", "西施", "杨玉环"]);
    const selectedGirl = ref("");
    const selectGirlFun = (index: number) => {
      selectedGirl.value = girls.value[index];
    };
    return {
      girls,
      selectedGirl,
      selectGirlFun,
    };
  },
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

二. ref() 函数

我们看到, 上述例程中使用了 ref()函数
ref()这个函数使得我们的变量拥有了双向绑定属性,
这是和vue2.0中写在data里就可以双向绑定是不同的.

下面我们通过一个错误的例程和修改后正确的例程来说明此函数

错误的例程

实验结果也是错的, a其实在增加, 但并没有显示在页面上

正确但例程, 要用到vue3.0 的 ref函数

把程序改正确很简单

引入ref
给a赋值一个ref对象, 具体是ref(1)
现在a指向了一个ref对象, 所以声明a不是let了, 是const
a的值要用 a.value来获取

上面一直在说ref对象, 其实人家的真实类型是:RefImpl, 可以从下面的截图看出它的结构

<template>
  <h2>{{ a }}</h2>
  <button @click="add">+</button>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "App",
  setup() {
    const a= ref(1);
    const add = () => {
      a.value += 1;
      console.log(a);
    };
    return {
      a,
      add
    };
  },
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

这样做有什么好处?

这样做的好处是区分了需要界面显示的变量和只参与script内部运算的变量, 从而不做不必要的数据绑定, 提高性能.

三. reactive()

除了ref这种方式, 我们还有一种方式可以把数据设置成双向绑定数据, 那就是reactive()
这也是和ref一样的把变量绑定到双向数据绑定对象的方法, 这个函数接收一个对象作为参数
下面,我们尝试将上面那个a++的例子改为reactive

<template>
  <h2>{{ a.value }}</h2>
  <button @click="add">+</button>
</template>

<script lang="ts">
import { reactive } from "vue"; //从vue模组引入reactive函数 

export default ({
  name: "App",
  setup() {
    const a= reactive({value:1}); //reactive接收对象作为参数, 所以应该这样写
    const add = () => {
      a.value += 1; //所以这里也要修改 a的value属性 上面也要显示a的value属性
      console.log(a);
    };
    return {
      a,
      add
    };
  },
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

根据控制台输出, 我们可以看到 a 现在是一个Proxy挂钩, 挂在一个target 对象上

所以网上说的ref是reactive的一个特例是不对的, 虽然两者用法很相似

四. reactive进阶用法----像vue2.0一样用vue3.0 😂😂😂

我们以上文中的四大美女服务员为例:

进化第一步: 改造为reactive() 绑定数据

<template>
  <h2>请选择服务员:</h2>
  <div>
    <button
      v-for="(name, index) in data.girls"
      v-bind:key="index"
      @click="data.selectGirlFun(index)"
    >
      {{ index }}:{{ name }}
    </button>
  </div>
  <h2>您选择了:{{ data.selectedGirl }}!!</h2>
</template>

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

export default {
  name: "App",
  setup() {
    const data = reactive({
      girls: ["貂蝉", "王昭君", "西施", "杨玉环"],
      selectedGirl: "",
      selectGirlFun: (index: number) => {
        data.selectedGirl = data.girls[index];
      },
    });
    return {
      data,
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

进化第二步: 既然使用了typescript, 将data的数据类型指定好
这里采用typescript的接口思想

进化第三步: 每次都用data.xxx 太麻烦, 能不能用...扩展运算符省略掉data.?

直接用扩展运算符是不行的因为扩展运算符会取消data的响应式
要使用 toRefs函数

toRefs()接收一个reactive object,并把它变成一个ToRefs<T>的泛型类型,使其具有双向数据绑定的特性

<template>
  <h2>请选择服务员:</h2>
  <div>
    <button
      v-for="(name, index) in girls"
      v-bind:key="index"
      @click="selectGirlFun(index)"
    >
      {{ index }}:{{ name }}
    </button>
  </div>
  <h2>您选择了:{{ selectedGirl }}!!</h2>
</template>

<script lang="ts">
import { reactive,  toRefs } from "vue"; //从vue中引入 toRefs
interface DataProp {
  girls: string[];
  selectedGirl: string;
  selectGirlFun: (index: number) => void;
}
export default {
  name: "App",
  setup() {
    const data: DataProp = reactive({
      girls: ["貂蝉", "王昭君", "西施", "杨玉环"],
      selectedGirl: "",
      selectGirlFun: (index: number) => {
        data.selectedGirl = data.girls[index];
      },
    });
    const refdata = toRefs(data); //把data转为ref类型对象
    console.log(data);
    console.log(refdata);
    return {
      ...refdata, //用扩展运算符扩展这个变量
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

toRefs 从控制台打印data 和 refdata 进行比较