vue3 day01

我心飞翔 分类:vue

一. 创建vue

第一种方式

  • 使用vue-cli
#查看脚手架版本,确保vue/cli的版本在4.5.0以上
vue --version
vue -V
#安装或升级你的@vue/cli
npm install -g @vue.cli
##创建项目
vue create vue_test
## 启动
cd vue_test
npm run serve

第二种方式

  • 使用vite
 npm init vite-app vue3_test_vite
#安装依赖
yarn
# 启动
# 这里后面填,并没有启动成功

官方文档:https://vitejs.cn/guide/why.html#why-not-bundle-with-esbuild

  • 什么是vite
    • 新一代前端构建工具
  • 优势如下
    • 开发环境中,无需打包操作,可快速的冷启动
    • 轻量快速的热重载(HMR)
    • 真正的按需编译,不在等待整个应用程序编译完成
  • 传统构建
  • vite构建

分析工程

  • main.js
//导入的不是vue的构造函数,是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

/*
createApp(App).mount('#app')
替换了这句
const vm = new Vue({
    render:h=>h(App)
});
vm.$mount('#app')
*/

这个就是createApp的返回,类似v2的vm,但是比vm更轻量

mount就是挂载组件,只有挂载了App,这个组件才会显示,同时也可以调用unmount去卸载组件

vue3的初始化,已经不兼容Vue2的 new Vue({})的写法了,import的直接是undefined

  • Vue组件的区别
    • 可以没有根标签

开发者工具

目前vue的插件是支持vue2/vue3的,无需新下载版本

常见Composition API

composition api :组合式api

文档地址: https://v3.cn.vuejs.org/guide/composition-api-introduction.html

setup

  1. 理解:
    1. vue3.0中一个新的配置项,值为一个函数
  2. setup是所有Composition api(组合api) 表演的舞台
  3. 组建中所用到的东西,数据,方法等等,均要配置在setup中
  4. setup函数的两种返回值
    1. 若返回一个对象,则对象的属性,方法,在模板中均可以直接使用(重点关注)
    2. 若返回一个渲染函数,则可以自定义渲染内容(了解)
  5. 注意点
    1. vue2.x配置(data,methods,computed...)中可以访问到setup中的属性,方法
    2. 但是setup中不能访问到vue2.x配置(data,methods,computed)
    3. 如果有重名,setup优先
    4. 尽量不要与vue2.x配置混用
    5. setup不能是一个async函数,因为返回值不再是return的对象,而是promise,模板看不到return对象中的属性
  • hello

setup的第一种用法

<template>

  <h1>我是setup测试</h1>
  <h1>个人信息</h1>
  <h2>{{name}}</h2>
  <h2>{{age}}</h2>
  <button @click="sayHello">sayHello</button>
</template>

<script>

export default {
  name: 'App',

  //这里会丢失响应式,只是做一个演示
  setup(){
    let name = "花花";
    let age = 18;

    function sayHello() {
      alert(`我的名字是${name},我今年${age}岁`)
    }

    return {
      name,age,sayHello
    }
  }

}
</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>

setup的第二种用法

<template>

  <h1>我是setup测试</h1>
  <h1>个人信息</h1>
  <h2>{{ name }}</h2>
  <h2>{{ age }}</h2>
  <button @click="sayHello">sayHello</button>
</template>

<script>

import {h} from "vue";

export default {
  name: 'App',
  setup() {
    return ()=> h("h1","花花")
  }

}
</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

  • 修改sayHelllo
function sayHello() {
  name = "花花2";
  age = 20;
  console.log(name,age)
  // alert(`我的名字是${name},我今年${age}岁`)
}

实际上是修改了,但是因为不是响应式数据,视图不刷新

  • 使用ref解决这个问题
setup(){
    let name = ref("花花");
    let age = ref(18);

    function sayHello() {
        console.log(name,age)
    }

ref包裹的 实际上返回了一个RefImpl 引用实现类,官网原话是响应式引用

/*
* 可以通过这个来修改变量
*/
function sayHello() {
  name.value = "花花2";
  age.value = 20;
}

完整代码

<template>

  <h1>我是setup测试</h1>
  <h1>个人信息</h1>
  <h2>{{ name }}</h2>
  <h2>{{ age }}</h2>
  <button @click="sayHello">sayHello</button>
</template>

<script>


import {ref} from "vue";

export default {
  name: 'App',
  setup(){
    let name = ref("花花");
    let age = ref(18);

    function sayHello() {
      name.value = "花花2";
      age.value = 20;
      console.log(name,age)
    }

    return {
      name,age,sayHello
    }
  }

}
</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对对象的处理
let job = ref({
    jobs:"前端开发工程师",
    salary:'3k'
})


function sayHello() {
    console.log(job.value)
}
  • 发现ref对对象的处理时不一样的,他是proxy

总结

  • 作用: 定义一个响应式数据
  • 语法const xxx = ref(initValue)
    • 创建一个包含响应式数据的引用对象(refrence对象,简称reg对象)
    • js操作数据xxx.value
    • 模板中读取数据: 不需要.value,直接<div>{{xxx}}</div>
  • 备注:
    • 接收的数据可以是基本类型,也可以是对象
    • 基本数据类型: 响应式依然是靠Object.defineProperty()getset完成的
    • 对象类型: 内部求助了vue3.0中的新函数,reactive
  • 最终代码
<template>

  <h1>我是setup测试</h1>
  <h1>个人信息</h1>
  <h2>{{ name }}</h2>
  <h2>{{ age }}</h2>
  <button @click="sayHello">sayHello</button>
  <h2>职业:{{job.jobs}}</h2>
  <h2>薪水:{{job.salary}}</h2>
</template>

<script>


import {ref} from "vue";

export default {
  name: 'App',
  setup(){
    let name = ref("花花");
    let age = ref(18);
    let job = ref({
      jobs:"前端开发工程师",
      salary:'3k'
    })

    function sayHello() {
      name.value = "花花2";
      age.value = 20;
      job.value.salary = '6k'
      job.value.jobs = "全栈开发工程师"
      console.log(name,age)
      console.log(job.value)
    }

    return {
      name,age,sayHello,job
    }
  }

}
</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>

回复

我来回复
  • 暂无回复内容