新手Vue学习第二天

1.2 vue特性

目标：理解声明式，对比传统DOM开发

Vue从设计角度来讲，虽然能够涵盖这张图上所有的东西，但是你并不需要一上手就把所有东西全用上，都是可选的。

声明式渲染和组件系统是Vue的核心库所包含内容，而路由、状态管理、构建工具都有专门解决方案。这些解决方案相互独立，我们可以在核心的基础上任意选用其他的部件（以插件形势使用），不一定要全部整合在一起。

Vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM的系统。

假设需要输出 “hello xa-gp-01”

准备工作：cnpm

npmmirror 中国镜像站
$ npm install -g cnpm --registry=https://registry.npmmirror.com
以后就可以使用cnpm 代替 npm

如果遇到类似于以下**psl这种错误

只需要找到这个文件删除即可（这个错误只会出现在windows电脑下）
补充：如果使用cnpm出现 randomUUID is not a function，解决方法
$ npm uninstall -g cnpm
$ npm install [email protected] -g

传统开发模式的原生js，jQuery代码如下：

<div id="test"></div>
<!--原生js-->
<script>
  const msg = "hello xa-gp-01"
  const test = document.getElementById('test')
  test.innerHTML = msg // test.innerText = msg  test.contentText=""
</script>
<!--jQuery-->
<script>
    var msg = 'hello xa-gp-01'
    $('#test').html(msg) // $('#test').text(msg)
</script>

$ cnpm i vue jquery 
拷贝 node_modules/vue/dist/vue.global.js以及vue.global.prod.js，还有 jquery/dist/jquery.js以及jquery.min.js到lib文件夹

完整代码：01_before.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01_传统的DOM操作</title>
</head>
<body>
  <div id="jsDOM"></div>
  <div id="jQueryDOM"></div>
</body>
<script src="lib/jquery.js"></script>
<script>
  const msg = '<h1>hello xa-gp-01</h1>'
  // jsDOM
  const jsDOM = document.getElementById('jsDOM')
  jsDOM.innerHTML = msg // 解析输出
  // jsDOM.innerText = msg // 转义输出
  // jsDOM.textContent = msg // 转义输出

  // jQueryDOM
  const jQueryDOM = $("#jQueryDOM") // jQuery DOM 选择器
  jQueryDOM.html(msg) // 解析输出
  // jQueryDOM.text(msg) // 转义输出

  console.log(jsDOM)
  console.log(jQueryDOM[0])

</script>
</html>

02_vue3.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue3解决dom问题</title>
  <script src="lib/vue.global.js"></script>
</head>
<body>
  <div id="app">
    {{ msg }}
  </div>
</body>
<script>
  // 创建应用的方法
  const { createApp } = window.Vue

  // 创建应用
  const app = createApp({
    // 业务
    data () { // 初始化数据，在vue3中data写法为函数，返回一个对象，对象中写初始化数据
      return {
        msg: 'hello XA-GP-01'
      }
    }
  })

  // 挂载应用
  app.mount('#app')

</script>
</html>

03_vue2.html

$ cnpm i vue@2

拷贝 vue下的 vue.js 以及vue.min.js到lib文件夹

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03_vue2解决DOM</title>
  <script src="lib/vue.js"></script>
</head>
<body>
  <div id="app">
    {{ msg }}
  </div>
</body>
<script>
  // new Vue({
  //   el: '#app', // 挂载到 id 为 app的DOM上
  //   data: { // 只有在new Vue 时才写为对象，其余时刻写为函数返回对象
  //     msg: 'HELLO XA_GP_01'
  //   }
  // })

  new Vue({
    data: { // 只有在new Vue 时才写为对象，其余时刻写为函数返回对象
      msg: 'HELLO XA_GP_01!!'
    }
  }).$mount('#app')
</script>
</html>

1.3 vue3十大新特性

* setup   ----   组合式API
* ref     ----   组合式API
* reactive  ----   组合式API
* 计算属性computed  ----   组合式API 以及 选项式API
* 计算属性watch     ----   组合式API 以及 选项式API
* watchEffect函数  ----   组合式API
* 生命周期钩子      ----   组合式API 以及 选项式API
* 自定义hook函数   ----   组合式API
* toRef和toRefs   ----   组合式API 以及 选项式API
* 其他新特性
  * shallowReactive 与 shallowRef ----   组合式API 
  * readonly 与 shallowReadonly ----   组合式API 
  * toRaw 与 markRaw ----   组合式API 
  * customRef ----   组合式API
  * provide 与 inject ----   组合式API 以及 选项式API
  * 响应式数据的判断 ----   组合式API 以及 选项式API
* 新的组件  ----- 类似于新增的HTML标签
  * Fragment
  * Teleport
  * Suspense
* 其他变化
  * data选项应始终被声明为一个函数
  * 过渡类名的更改
  * 移除keyCode作为 v-on 的修饰符，同时也不再支持config.keyCodes  --- 事件处理
  * 移除v-on.native修饰符  --- 事件处理
  * 移除过滤器（filter）  ---  单独讲解vue2和vue3差异化

1.4 创建第一个vue3应用

每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例：

<div id="app"></div>

import { createApp } from 'vue'

const app = createApp({
  /* 根组件选项 */
})
app.mount('#app')

简单计数器案例：04_counter.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04_简单计数器</title>
</head>
<body>
  <div id="app">
    <div>count is: {{ count }}</div>
    <div>doubleCount is: {{ doubleCount }}</div>
    <button @click="count++">加1</button>
  </div>
</body>
<script src="lib/vue.global.js"></script>
<script>
  Vue.createApp({
    data () {
      return {
        count: 10
      }
    },
    computed: {// 计算属性 依赖性
      doubleCount () {
        return this.count * 2
      }
    }
  }).mount('#app')
</script>
</html>

1.我们传入 createApp 的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。

应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串：

1.5 API风格

参考链接

目标：选项式API以及组合式API如何选择

05_composition.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>05_组合式API</title>
</head>
<body>
  <div id="app">
    <div>count is: {{ count }}</div>
    <button @click="count++">加1</button>
  </div>
</body>
<script src="lib/vue.global.js"></script>
<script>
  const { createApp, ref } =  Vue

  createApp({
    setup () {

      const count = ref(10)

      return {
        count
      }
      
    }
  }).mount('#app')
</script>
</html>

使用组合式API可以

更好的逻辑复用
更灵活的代码组织
更好的类型推导
更小的生产包体积

选项式 API 确实允许你在编写组件代码时“少思考”，这是许多用户喜欢它的原因。然而，在减少费神思考的同时，它也将你锁定在规定的代码组织模式中，没有摆脱的余地，这会导致在更大规模的项目中难以进行重构或提高代码质量。在这方面，组合式 API 提供了更好的长期可维护性。

组合式 API 能够覆盖所有状态逻辑方面的需求

一个项目可以同时使用两种API

选项式API不会被抛弃

新手Vue学习第二天

1.2 vue特性

1.3 vue3十大新特性

1.4 创建第一个vue3应用

1.5 API风格

悦读