[JavaScript知识库]vue3学习笔记

一. 安装

1. cdn

<script src="https://unpkg.com/vue@next"></script>

?2. npm

?脚手架vite

npm init vite hello-vue3 -- --template vue # 或 yarn create vite hello-vue3 --template vue

脚手架vue-cli

npm install -g @vue/cli # 或 yarn global add @vue/cli
vue create hello-vue3
# 选择 vue 3 preset

我选的这个，之前安装过vue-cli，需要先卸载再安装，要不然会报这个：

?后面就是一些配置，记得选vue3项目啊！默认是vue2的，我搞了半天发现不对劲，真是一口老血。。。

*默认启动项目命令：npm run serve，不再是dev了

二. 新特性

1. 组合式API

官网上叙述了一堆，我的理解就是把处理某个逻辑的相关代码组合在一起的东西?

1) setup组件选项?

① 定义

组合式API的入口，一个接收props和context的函数，返回的所有内容都暴露给组件的其余部分

② 执行时间

组件创建之前（beforeCreated），所以setup里不能使用this，也不能获取data property（属性）、computed property或methods。

③ 示例

export default {
    props: {
        user: {
            type: String,
            required: true
        }
    },
    setup(props,context){
    
    }
}

④ props参数

它是响应式的，传入新的值时会被更新。不能使用es6解构，会消除响应性。

如需解构可用toRefs（解构全部）或toRef（解构单个，防止可选的prop没有值导致未被创建ref）

示例：

import { toRefs } from 'vue'

setup(props){
    const { title } = toRefs(props)
    console.log(title.value)
}

import { toRef } from 'vue'

setup(props){
    const title = toRef(props,'title')
    console.log(title.value)
}

⑤ context参数

一个普通js对象，可以解构。一些有用的值：

export default {
    setup(props,context){

        //Attribute：非响应式对象,等同于$attrs
        console.log(context.attrs)

        //插槽：非响应式对象,等同于$slots
        console.log(context.slots)

        //触发事件：方法,等同于$emit
        console.log(context.emit)

        //暴露公共property函数
        console.log(context.expose)
    }
}

⑥ 结合模板使用：如果setup返回一个对象，对象中的属性可以在模板中访问到：

<template>
  <div class="setup">
    <p>{{ title }}</p>
    <p>{{ title1 }}</p>
  </div>
</template>

<script>
import { toRef }  from 'vue'
export default {
  props: {
    title: {
      type: String,
      default: "title",
    },
  },
  setup(props) {
    let title = toRef(props, 'title')
    let title1 = title.value + 'aaaa'
    return {
        title1
    }
  },
};
</script>

<style>
</style>

⑦使用渲染函数&expose（悄咪咪：这里搞得很像react哎

返回一个渲染函数，该函数可以直接使用同一作用于中声明的响应式状态。

不过我没搞懂返回了之后呢？怎么使用这个渲染函数？还是说怎么访问？有无大佬知道的能指点一下？

返回渲染函数之后，之前return的对象不能用了，需要使用expose，没搞懂为什么要定义一个方法再传给它。估计这个也很少用到吧。先放着。

示例：

<template>
  <div class="setup">
    <p>{{ title }}</p>
    <p>{{ title1 }}</p>
  </div>
</template>

<script>
import { toRef, h }  from 'vue'
export default {
  props: {
    title: {
      type: String,
      default: "title",
    },
  },
  setup(props) {
    let title = toRef(props, 'title')
    let title1 = title.value + 'aaaa'
    const increment = () => title.value

    expose({
      increment
    })
    return ()=> h('div',title)
  },
};
</script>

<style>
</style>

...未完待续