创建项目

vue_cli创建项目

vue_cli的安装见：https://www.cnblogs.com/smyz/p/17309086.html
使用vue_cli创建项目与创建vue2.0项目步骤相同

# 1. 进入到相关目录
# 2. 使用下面的命令进行创建
vue create 项目名称

vite创建项目

官网：http://www.vitejs.net/
npm工具的安装见：https://www.cnblogs.com/smyz/p/17309086.html

1. 安装vite

# 1. 使用npm安装
npm init vue@latest  # 如果安装了cnpm也可以使用  cnpm init vue@latest 会更快

2. 安装vuex

vuex分3.x版本和4.x版本，分别对应vue2.0与3.0，也就是,vue2.0只能安装vuex3.x版本，而vue3.0才能装vuex4.x版本。
vuex4.x版本安装官网：https://vuex.vuejs.org/zh/installation.html

# 使用-S参数，仅安装在此项目中
npm install vuex@next -S
# 在src目录中创建index.js，并添加如下内容：
import { createApp } from 'vue'
import { createStore } from 'vuex'
import App from "../App.vue";

// 创建一个新的 store 实例
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

const app = createApp({App})

// 将 store 实例作为插件安装
app.use(store)

export default store

# 3. 在src/main.js中注册
import store from './store'
app.use(router, store)

3. 启动项目

npm run dev

常用API

setup()

1. 在新的vue3项目中，不再推荐使用vue2.x配置方法。
2. setup为Vue3.0中一个新的配置项，值为一个函数.
3. setup是所有Composition API（组合API）编写的位置(组件中所用到的：数据、方法等等，均要配置在setup中)
4. setup函数的返回值：返回一个对象，对象中的属性、方法, 在模板中均可以直接使用
5. 注意：
   • 尽量不要与vue2.x配置的方法混用。
     • vue2.x中的配置(data,methods等)可以访问到setup中定义的属性和方法
     • vue3.x中setup定义的属性方法无法访问vue2.x中的配置

基本使用示例

<template>
  <div class="home">
    <p>姓名:{{ username }}</p>
    <p>年龄:{{ age }}</p>
    <button @click="btnFunc">点我年龄加1</button>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  // 所有的内容都定义在setup函数中
  setup() {
    // 这种写法只能将内容放到页面中，但是并没有做双向数据绑定。也就是说，数据变了，页面中的内容不会发生变化
    let username = 'Jack'
    let age = 10
    let btnFunc = () => {
      age = age + 1
      console.log(age)
    }
    // 定义的所有变量、函数都需要在return中返回
    return {username, age, btnFunc}
  }
}
</script>

• 根据下图可以看到，点击按钮后，值发生了改变，但页面却未发生变化。

ref与reactive

• ref函数主要用于“字符串、数字”的双向数据绑定，但ref也可以用于“对象、数组”的双向数据绑定，但写起来会麻烦点
• reactive函数主要用于“对象、数组”的双向数据绑定
• 在使用前需要先导入，注意不要把import命令写到export中，会报错

ref与reactive

toRef与toRefs

• 作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。
• 语法：const name = toRef(person,'name')
• 应用: 要将响应式对象中的某个属性单独提供给外部使用时。
• 扩展：toRefs 与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)

<template>
  <div class="home">
    <p>name: {{ name }}</p>
    <p>age: {{ age }}</p>
    <p>name2: {{name2}}</p>
    <p>age2: {{age2}}</p>
  </div>
</template>

<script>
// 导入ref和reactive方法，目的是作双向数据绑定
// ref函数主要用于“字符串、数字”的双向数据绑定
// reactive函数主要用于“对象、数组”的双向数据绑定
// toRefs为解构赋值
import {ref, reactive, toRefs} from 'vue'  // import命令注意不要写到export中

export default {
  name: 'HomeView',
  setup() {
    let person = reactive({
      name: 'JACK',
      age: 19
    })
    let person2 = reactive({
      name2: 'rose',
      age2: 18
    })
    // 使用toRefs后，页面中调用时直接使用{{key}}即可，不需要{{person.name}}这种了
    // 多个键不能冲突
    return {...toRefs(person), ...toRefs(person2)}
  }
}
</script>

计算属性computed

• 计算属性在vue2.x中是写到computed中
• 计算属性定义：https://www.cnblogs.com/smyz/p/17308948.html
• 监听属性在vue2.x中是写到watch中
• 在vue3.x中需要使用import导入computed方法【 import {computed} from 'vue' 】

示例

<template>
  <div class="home">
    <p>游戏1：{{ game1.name }}，价格:{{ game1.price }}日元 购买数量：<input type="text" v-model="game1.num"></p>
    <p>游戏2：{{ game2.name }}，价格:{{ game2.price }}日元 购买数量：<input type="text" v-model="game2.num"></p>
    <p>总价格：{{ totalPrice }}日元</p>
  </div>
</template>

<script>
// 导入要使用的方法
import {reactive, computed, watch} from 'vue'

export default {
  name: 'HomeView',
  // 所有的内容都定义在setup函数中
  setup() {
    // 定义两个示例变量
    let game1 = reactive({name: '赛尔达传说:王国之泪', price: 7950, num: 0})
    let game2 = reactive({name: '皮克敏4', price: 6500, num: 0})
    // 定义计算属性，当值发生改变时，计算属性函数会自动执行，并将最终的值返回给变量，页面中只需要把值当面一个变量使用即可
    let totalPrice = computed(() => {
          return game1.price*game1.num + game2.price*game2.num
        }
    )
    // 最后不要忘记返回定义的各个变量
    return {game1, game2, totalPrice}
  }
}
</script>

• 效果如下图

监听属性watch

• 监听属性之前的博客：https://www.cnblogs.com/smyz/p/17309054.html
• 监听属性就是监视一个属性，当被监听属性发生改变时，就会触发此监听属性的执行。说白了就是相当于oracle的触发器
• 监听属性可以获取到改前的值和改后的值
• 要使用监听属性需要导入相关函数 这【 import {watch} from 'vue' 】

示例

<template>
  <div class="home">
    <p>游戏1：{{ game1.name }}，价格:{{ game1.price }}日元 购买数量：<input type="text" v-model="game1.num"></p>
    <p>游戏2：{{ game2.name }}，价格:{{ game2.price }}日元 购买数量：<input type="text" v-model="game2.num"></p>
  </div>
</template>

<script>
// 导入要使用的方法
import {reactive, watch} from 'vue'

export default {
  name: 'HomeView',
  // 所有的内容都定义在setup函数中
  setup() {
    // 定义两个示例变量
    let game1 = reactive({name: '赛尔达传说:王国之泪', price: 7950, num: 0})
    let game2 = reactive({name: '皮克敏4', price: 6500, num: 0})
    // 定义计算属性，当值发生改变时，计算属性函数会自动执行，并将最终的值返回给变量，页面中只需要把值当面一个变量使用即可
    watch(game1,(newNum, oldNum) => {
      console.log('《赛尔达传说:王国之泪》的数量变为：',game1.num)
      console.log('我是改后的值', newNum)
      console.log('我是改前的值', oldNum)
    })
    watch(game2,(newNum, oldNum)=>{
      console.log('《皮克敏4》的数量变为：',game2.num)
      console.log('我是改后的值', newNum)
      console.log('我是改前的值', oldNum)
    })
    // 最后不要忘记返回定义的各个变量
    return {game1, game2}
  }
}
</script>

• 可以看到，修改的值以后，触发了watch中的执行，但如果修改的值与原值相同，相当于未发生改变，就不会触发watch属性的执行。

监听属性watchEffect

• watchEffect 不需要指定监听的属性，他会自动进行依赖收集，只要我们回调中使用了响应式的属性，那么这些属性在变更之后这个回调都会执行，不像 watch 只能监听指定的属性。
• 在初始化页面的时候会先执行一次

示例

<template>
  <div class="home">
    <br>
    <br>
    <br>
    <br>
    <p>游戏1：{{ game1.name }}，价格:{{ game1.price }}日元 购买数量：<input type="text" v-model="game1.num"></p>
    <p>游戏2：{{ game2.name }}，价格:{{ game2.price }}日元 购买数量：<input type="text" v-model="game2.num"></p>
  </div>
</template>

<script>
// 导入要使用的方法
import {reactive, watch, watchEffect} from 'vue'

export default {
  name: 'HomeView',
  // 所有的内容都定义在setup函数中
  setup() {
    // 定义两个示例变量
    let game1 = reactive({name: '赛尔达传说:王国之泪', price: 7950, num: 0})
    let game2 = reactive({name: '皮克敏4', price: 6500, num: 0})

    // 不需要指定监听属性，只要在函数中调用了一个属性，那么这个属性发生改变就会被触发
    watchEffect(
        // 可以看到并未指定监听哪个属性
        ()=>{
          // 只是在函数体内调用了一下
          console.log('测试watchEffect的变化，game1.num改变了：', game1.num)
        }
    )
    return {game1, game2}
  }
}
</script>

• 如下图：当刷新页面时会先执行一下watchEffect中定义的内容。
• 当值未发生变化不会触发
• 当值发生变化就会触发

新的生命周期钩子函数

• Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：
  • beforeDestroy改名为 beforeUnmount
  • destroyed改名为 unmounted
• Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
  • beforeCreate     ===>       setup()
  • created              ===>       setup()
  • beforeMount     ===>       onBeforeMount
  • mounted            ===>       onMounted
  • beforeUpdate     ===>       onBeforeUpdate
  • updated              ===>       onUpdated
  • beforeUnmount ===>       onBeforeUnmount
  • unmounted        ===>       onUnmounted

使用vite创建的项目

• 使用vite创建的项目，在script标签中有一个属性为 setup，当有了这个属性后，就不再需要写setup函数，上面所有的内容都可以直接写到script中，直接使用即可。也不需要再return出去

本栏目推荐文章
• vue---循环方式以及跳出循环
• vue-quill编辑器vue2版
• vue-quill编辑器网页版
• vue模板的首次渲染，和重新渲染，有哪些区别？
• 【Vue2】金额范围查询项
• Vue——在Django中配置文件以解决跨域问题
• vue入门——？？？07days
• 直接在*.vue文件（SFC）中使用JSX/TSX渲染函数，真香!
• vue 使用screenfull全屏插件后，F11和ESC导致的问题解决
• 零基础入门Vue之梦开始的地方——插值语法

Vue 3.0reactive effect vue 3.0 编辑器tinymce vue 3.0 vue 3.0 语法3.0 vue 前端 网站vue 3.0 前端 项目vue 3.0 指令vue 3.0 全家vue 3.0 js 7625 3.0 vue windows node vue 3.0