美文网首页
第一篇:初识vue3

第一篇:初识vue3

作者: 小肥爬爬 | 来源:发表于2021-04-20 17:26 被阅读0次

    用 vite 管理项目

    vite 是什么? 作者推出的用以替代webpack的打包工具, 号称速度最快. 没啥可说的, 学吧...

    好在它的透明性极高, 基本不用怎么管它. 用这个命令创建项目, vite 就自动包括在package.json 里了:

    npm init vite-app sample1 
    cd sample1 
    npm install 
    npm run dev 
    

    然后访问 http://localhost:3000/ 就可以看到了.

    第一个vue3程序

    语法都改了

    在Vue3.0中提出了Composition API的概念,Vue2.0中我们通过props、data、methods等来定义组件,在Vue3.0中我们使用setup定义响应式的数据和方法. 总而言之, 曾经短期用过 React的我觉得, 一切都向React 靠拢....

    修改App.vue 如下:

    <template>
      <h1>ref 的例子</h1>
      <img alt="Vue logo" src="./assets/logo.png">
        <div>{{user}}的年龄: {{age}}</div>
        <div>财富收入: {{double}}</div>
        <button @click="add">+</button>
    </template>
    
    <script>
    import {computed, ref} from 'vue'
    
    export default {
      name: 'App',
      components: {
      }, 
    
      setup() {
        
        // ---- 原来位于 data { } 里的定义
        const user = ref('小肥爬爬')    // 初始化的值
        const age = ref(40)           // 初始化的值
        
        // ---- 原来位于 computed 里的定义
        const double = computed(() =>{
          return age.value * 2
        })
    
        function add() {
          // 看看 ref 是什么 ? 
          console.log('--- ref: ', ref);
          age.value += 1
        }
        return {user,age,add,double}
      }
    }
    </script>
    
    

    以前的data 被ref 代替

    对照上面的代码和解释, 可以看出以前在data / methods 里这么写:

    data: {
      user: '小肥爬爬', 
      age: 40, 
    }, 
    
    methods: {
      add(){
        // 代码实现
      }
    }
    

    以后这么写:

        const user = ref('小肥爬爬')    // 初始化的值
        const age = ref(40)           // 初始化的值
    
        // 方法
        add(){
            // 代码实现
        }
    
        // 记得要return 
        return {
            user, age, add
        }
    

    computed 的写法

    以前的computed写法也换了. 新的computed 这样写:

    const double = computed(() =>{
          return age.value * 2
        })
    

    然后同样在 setup 里导出.

    我个人是相当喜欢这两个改变. 减少了很多代码量.

    reactive

    reactive 是vue3的一个新api, 它的作用是将普通对象变成响应式对象. 这个例子将之前的程序改用reactive 来写:

    <template>
      <h1>ref 的例子</h1>
      <img alt="Vue logo" src="./assets/logo.png">
        <div>{{user}}的年龄: {{age}}</div>
        <div>财富收入: {{double}}</div>
        <button @click="add">+</button>
    </template>
    
    <script>
    import {computed, reactive, toRefs} from 'vue'
    
    export default {
      name: 'App',
      components: {
        
      }, 
    
      setup() {
        
        const UserInfo = reactive({
            user:'小肥爬爬',
            age:40,
            double : computed(() =>{
              return UserInfo.age * 2
            })
        })
    
        function add() {
          UserInfo.age += 1
        }
        return {...toRefs(UserInfo), add}
      }
    }
    </script>
    
    

    在这个例子里, reactive 将以前data / computed 的属性都封装成一个对象(该对象称为响应式对象) , toRefs 方法将之转变为实际的 ref , 给该vue使用.

    注意!!

    这里有个小陷阱, 你会看到用 ref定义属性的时候, 对该属性的操作是 xxx.value , 如下:

    const age = ref(40)           // 初始化的值
    function add() {
       age.value += 1
    }
    

    而如果是用 reactive 里组装响应式对象, 那么该对象的属性不用加value:

    function add() {
       UserInfo.age += 1  // 注意这里不是 UserInfo.age.value 
    }
    

    于是我想, 如果 reactive 里是list/map 对象, 又该如何访问呢? 于是又改了个例子如下:

    <template>
      <h1>reactive包装对象</h1>
      <img alt="Vue logo" src="./assets/logo.png">
        <div>{{user}}的第二篇博客是: {{getSecond}}</div>
    </template>
    
    <script>
    import {computed, reactive, toRefs} from 'vue'
    
    export default {
      name: 'App',
      components: {
        
      }, 
    
      setup() {
        
        const UserInfo = reactive({
            user:'小肥爬爬',
            age:40,
            blogs: [
                {'title': 'python3有用代码'}, 
                {'title': 'spring cloud 入门教程'}, 
            ], 
    
            getSecond : computed(() =>{
              return UserInfo.blogs[1].title;
            })
        })
    
        return {...toRefs(UserInfo)}
      }
    }
    </script>
    
    

    实践证明, 对于这样的结构:

    // 假设一个reactive 对象如下: 
    const UserInfo = reactive({
        user:'小肥爬爬',
        age:40,
        blogs: [
            {'title': 'python3有用代码'}, 
            {'title': 'spring cloud 入门教程'}, 
        ]
    })
    

    还是正常的访问方式:

    getSecond : computed(() =>{
        return UserInfo.blogs[1].title;
    })
    

    总结

    好了, 第一篇就先这样结束, 代码都在: https://gitee.com/xiaofeipapa/vue3-sample

    由于一开始没有写vue3的组件开发, 所以代码组织比较麻烦. 本文的3个大例子都在 src/sample/ 目录下, 需要运行的时候请将之复制到 App.vue 运行.

    参考/感谢

    https://zhuanlan.zhihu.com/p/264211579
    https://blog.csdn.net/cuipp0509/article/details/108199513

    相关文章

      网友评论

          本文标题:第一篇:初识vue3

          本文链接:https://www.haomeiwen.com/subject/ruxnlltx.html