AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Vue3知识大纲

2022-12-28 329
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue3知识大纲

Vue3知识大纲

Vue.js起步

数据到视图映射

网络异常，图片无法展示
| 

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="app">
    <fieldset>
      <legend>数据驱动视图</legend>
      {{ message }}
    </fieldset>
  </div>
  <script>
    const App = {
      data() {
        return {
          message: 'Hello World'
        }
      }
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>
</html>

修改数据

网络异常，图片无法展示
| 

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="app">
    <fieldset>
      <legend>数据驱动视图</legend>
      <button @click="add">Click Me</button>
      {{ counter }}
    </fieldset>
  </div>
  <script>
    const App = {
      data() {
        return {
          counter: 0
        }
      },
      methods: {
        add() {
          this.counter++
        }
      },
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>
</html>

属性绑定

网络异常，图片无法展示
| 

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://unpkg.com/vue@next"></script>
</head>
![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/735ebe023180428c86fde3988d5398a6~tplv-k3u1fbpfcp-watermark.image?)
<body>
  <div id="app">
    <fieldset>
      <legend>属性的绑定</legend>
      <a :href="url" :title="message">百度</a>
      {{ message }}
    </fieldset>
  </div>
  <script>
    const App = {
      data() {
        return {
          url: 'https://baidu.com',
          message: 'Hello World'
        }
      }
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>
</html>

双向绑定

网络异常，图片无法展示
| 

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="app">
    <fieldset>
      <legend>双向绑定</legend>
      <input type="text" v-model="search">
      {{search}}
    </fieldset>
  </div>
  <script>
    const App = {
      data() {
        return {
          search: "hello"
        }
      }
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>
</html>

条件渲染

网络异常，图片无法展示
| 

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="app">
    <fieldset>
      <legend>条件渲染</legend>
      <p v-if="isShow"> 子组件</p>
      <button @click="isShow = !isShow">Click</button>
    </fieldset>
  </div>
  <script>
    const App = {
      data() {
        return {
          isShow: true
        }
      },
      // methods: {
      //   toggle() {
      //     this.isShow = !this.isShow
      //   }
      // },
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>
</html>
复制代码

循环渲染

网络异常，图片无法展示
| 

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="app">
    <fieldset>
      <legend>列表渲染</legend>
      <ul>
        <li v-for="value in items"> {{value}}</li>
      </ul>
      <button @click="add">Click</button>
    </fieldset>
  </div>
  <script>
    const App = {
      data() {
        return {
          items: ['item0', 'item1', 'item2']
        }
      },
      methods: {
        add() {
          this.items.push('item' + this.items.length)
        }
      },
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>
</html>

自定义组件

网络异常，图片无法展示
| 

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="app">
    <fieldset>
      <legend>自定义组件</legend>
      <todo-item></todo-item>
      <button @click="add">Click</button>
    </fieldset>
  </div>
  <script>
    const App = {
      data() {
        return {
        }
      }
    }
    const app = Vue.createApp(App)
    app.component('todo-item', {
      data() {
        return { message: 'hello' }
      },
      template: "<div>{{message}} </div>"
    })
    app.mount('#app')
  </script>
</body>
</html>

组件实例、生命周期

1、Vue有哪些⽣命周期钩⼦？

  • beforeCreate在实例初始化之后，数据观测(data observer)和event/watcher事件配置之前被调用
  • created在实例创建完成后被立即调用。在这一步，实例已完成以下的配置︰数据观测(data observer)，property和方法的运算,watch/event 事件回调。然而，挂载阶段还没开始，$el property目前尚不可用
  • beforeMount在挂载开始之前被调用∶相关的render函数首次被调用
  • mounted实例被挂载后调用，这时 Vue.createApp({}).mount()被新创建的vm.$el替换了。如果根实例挂载到了一个文档内的元素上，当mounted被调用时vm.$el也在文档内。
  • beforeUpdate数据更新时调用，发生在虚拟DOM打补丁之前
  • updated由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子
  • beforeUnmount在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的
  • unmounted卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载

网络异常，图片无法展示
|

2、   如果需要发送Ajax请求，最好放在哪个钩⼦内？

一般情况下，都放在mounted中，保证逻辑的统一性。因为生命周期是同步执行的，ajax是异步执行的。

服务端渲染不支持mounted方法，所以在服务端渲染的情况下统一放在created中。

3、 ⽗⼦组件嵌套时，⽗组件视图和⼦组件视图渲染完成谁先谁后？

不确定

4、 ⽗⼦组件嵌套时，如果希望在所有组件视图都渲染完成后再执⾏操

作，该如何做？

mounted() { 
     this.$nextTick(function () { 
   // 仅在渲染整个视图之后运⾏的代码 
   });
   }

应用实例与组件实例

网络异常，图片无法展示
| 

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="app">
    <fieldset>
      <legend>组件实例</legend>
      {{ message }}
      <button @click="change">Click</button>
    </fieldset>
  </div>
  <script>
    const App = {
      data() {
        return {
          message: 'Hello Vue!!'
        }
      },
      methods: {
        change() {
          console.log(this)
          this.message += '!'
        }
      },
    }
    const app = Vue.createApp(App)
    console.log(app)
    const vm = app.mount('#app')
    console.log(vm)
  </script>
</body>
</html>

问题：左侧代码中的this是什么？

vm对象

生命周期

网络异常，图片无法展示
| 

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://unpkg.com/vue@next"></script>
</head>
  <div id="app">
    <fieldset>
      <legend>生命周期钩子</legend>
      <span id="msg">{{ message }}</span>
      <button @click="change">Click</button>
    </fieldset>
  </div>
  <script>
    const App = {
      data() {
        return { message: 'Hello Vue'}
      },
      methods: {
        change() {
          this.message += '!'
        }
      },
      beforeCreate() {
        console.log('beforeCreate', this.message, this.$el)
      },
      created() {
        console.log('created', this.message, this.$el)
      },
      beforeMount() {
        console.log('beforeMount', this.message, this.$el)
      },
      mounted() {
        console.log('mounted', this.message, this.$el) 
      },
      beforeUpdate() {
        console.log('beforeUpdate', this.message, document.querySelector('#msg').innerText)
      },
      updated() {
        console.log('updated', this.message, document.querySelector('#msg').innerText)
      }
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>
</html>

组件销毁生命周期代码演示

网络异常，图片无法展示
| 

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="app">
    <fieldset>
      <legend>生命周期钩子</legend>
      <child v-show="isShow"></child>
      <button @click="isShow = !isShow">Click</button>
    </fieldset>
  </div>
  <script>
        const App = {
      data() {
        return { isShow: true }
      },
      beforeCreate() {
        console.log('root beforeCreate', this.message, this.$el)
      },
      created() {
        console.log('root created', this.message, this.$el)
      },
      beforeMount() {
        console.log('root beforeMount', this.message, this.$el)
      },
      mounted() {
        console.log('root mounted', this.message, this.$el) 
      }
    }
    const app = Vue.createApp(App)
    app.component('child', {
      template: '<div>{{text}}</div>',
      data() { 
        return {text: 'I am child'}
      }, 
      created() {
        console.log('child  created')
      },
      mounted() {
        console.log('child mounted')
      },
      beforeUnmount() {
        console.log('child  beforeUnmount')
      },
      unmounted() {
        console.log('child  unmounted')
      },
    })
    app.mount('#app')
  </script>
</body>
</html>

data、methods、computed、watch

指令

参考文档

网络异常，图片无法展示
|

data methods

网络异常，图片无法展示
|

computed

网络异常，图片无法展示
|

methods和computed的区别

  1. 调用方式不同。computed直接以对象属性方式调用，不需要加括号，而methods必须要函数执行才可以得到结果。
  2. 绑定方式不同。methods与compute纯get方式都是单向绑定，不可以更改输入框中的值。compute的get与set方式是真正的双向绑定。
  3. 是否存在缓存。methods没有缓存，调用相同的值计算还是会重新计算。competed有缓存，在值不变的情况下不会再次计算，而是直接使用缓存中的值。

watch

网络异常，图片无法展示
|

小结

  • v-text 和 v-html 有什么区别
  • data 为什么要是函数
  • 计算属性缓存是什么，如果不想缓存该怎么做
  • watch、计算属性有什么区别

网络异常，图片无法展示
|

响应式原理

什么是响应式

数据响应式

网络异常，图片无法展示
|
范例 

var obj = {}
var age 
Object.defineProperty(obj, 'age', {
    get: function(){
        console.log('get age...')
        return age
    },
    set: function(val){
        console.log('set age...')
        age = val
    }
})
obj.age = 100  // 'set age...'
console.log(obj.age) // 'get age...', 100

Object.defineProperty实现响应式

function observe(data) {
  if(!data || typeof data !== 'object') return
  for(var key in data) {
    let val = data[key]  
    Object.defineProperty(data, key, {
      enumerable: true,
      configurable: true,
      get: function() {
        track(data, key)
        return val
      },
      set: function(newVal) {
        trigger(data, key, newVal)
        val = newVal
      }
    })
    if(typeof val === 'object'){
      observe(val)
    }
  }
}
function track(data, key) {
  console.log('get data ', key)
}
function trigger(data, key, value) {
  console.log('set data', key, ":", value)
}
var data = {
  name: 'hunger',
  friends: [1, 2, 3]
}
observe(data)
console.log(data.name)
data.name = 'valley'
data.friends[0] = 4
data.friends[3] = 5 // 非响应式
data.age = 6  //非响应式
复制代码

网络异常，图片无法展示
|

Proxy和Reflect

网络异常，图片无法展示
| 

const dinner = {
  meal: 'tacos'
}
const handler = {
  get(target, prop) {
    console.log('get...', prop)
    //return target[prop]
    return Reflect.get(...arguments)
  },
  set(target, key, value) {
    console.log('set...', key, value)
    //target[key] = value
    return Reflect.set(...arguments)
  }
}
const proxy = new Proxy(dinner, handler)
console.log(proxy.meal)

Proxy实现响应式

function reactive(obj) {
    const handler = {
      get(target, prop, receiver) {
        track(target, prop)
        const value = Reflect.get(...arguments)
        if (typeof value === 'object') {
          return reactive(value)
        } else {
          return value
        }
      },
      set(target, key, value, receiver) {
        trigger(target, key, value)
        return Reflect.set(...arguments)
      }
    }
    return new Proxy(obj, handler)
  }
  function track(data, key) {
    console.log('get data ', key)
  }
  function trigger(data, key, value) {
    console.log('set data', key, ":", value)
  }
  const dinner = {
    meal: 'tacos'
  }
  const proxy = reactive(dinner)
  proxy.meal = 'apple'
  proxy.list = []
  proxy.list.push(1) //响应式

小结

  • Vue3和Vue2的响应式原理分别是什么，二者有什么差异
  • 手写reactive 实现track trigger
  • 用Proxy和Object.defineProperty相比有什么优点和缺点

网络异常，图片无法展示
|

条件、列表、事件、组件、双向绑定、单向数据流

v-if和v-show的区别

网络异常，图片无法展示
| 

<div id="app">
  <button @click="isShow=!isShow">Toggle</button>
  <p v-if="isShow">v-if content</p>
  <p v-show="isShow">v-show content</p>
  <child v-if="isShow" title="v-if"></child>
  <child v-show="isShow" title="v-show"></child>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  const app = Vue.createApp({
    data() {
      return { isShow: true }
    }
  })
  app.component('child', {
    props: ['title'],
    template: `<div>component {{title}}</div>`,
    created() {
      console.log('child created', this.title)
    },
    unmounted() {
      console.log('child unmounted', this.title)
    }
  })
  app.mount('#app')
</script>

v-for列表渲染

网络异常，图片无法展示
| 

<div id="app">
  <div v-for="(item,index) in items" >
    <child></child>
    <button @click="remove(index)">delete</button>
  </div>
  <button @click=add>add</button>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  //[{id:1}, {id:2}, {id:3}]
  //[child1, child2, child3]
  const app = Vue.createApp({
    data() { return { items: [] } },
    methods:{
      remove(index) { 
        console.log('remove ', index)
        this.items.splice(index,1) 
      },
      add() { this.items.push({id: Math.random()}) }
    }
  })
  app.component('child', {
    data() { return { counter: Math.random() } },
    template: `<span>{{counter}} </span>` ,
    unmounted() {
      console.log(this.counter + ' unmounted')
    }, 
  })
  app.mount('#app')
</script>

事件处理

网络异常，图片无法展示
| 

<div id="app">
<span v-on:click="sayHello">click</span>
<!-- <span @click="sayHello">click</span>
<span @click="sayHello('hunger')">click</span>
<span @click="sayHello($event), sayHi('hunger')">click</span>
<span @click.once="sayHello(name)">click</span> -->
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  Vue.createApp({
    data() {
      return {
        name: 'hunger'
      }
    },
    methods: {
      sayHello(name) {
        console.log(name)
      },
      sayHi(name) {
        console.log(name)
      }
    },
  }).mount('#app')
</script>

v-model

网络异常，图片无法展示
| 

<div id="app">
  <fieldset>
    <legend> value 和 input </legend>
    <!-- value 和 input -->
    <input v-model="message" /> {{ message }}
  </fieldset>
  <fieldset>
    <legend> value 和 change </legend>
    <!-- value 和 change -->
    <textarea v-model.lazy="message"></textarea> {{ message }}
  </fieldset>
  <fieldset>
    <legend> 复选框 </legend>
    <input type="checkbox" v-model="checked" /> {{checked}}
  </fieldset>
  <fieldset>
    <legend> 多个复选框 </legend>
    <input type="checkbox" value="a" v-model="list" />
    <input type="checkbox" value="b" v-model="list" /> {{list}}
  </fieldset>
  <fieldset>
    <legend> 单选框 </legend>
    <input type="radio" value="a" v-model="theme" />
    <input type="radio" value="b" v-model="theme" /> {{theme}}
  </fieldset>
  <fieldset>
    <legend> select </legend>
    <select v-model="selected" multiple>
      <option value="AA">A</option>
      <option value="BB">B</option>
      <option value="CC">C</option>
    </select>
    <br />
    <span>Selected: {{ selected }}</span>
  </fieldset>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  Vue.createApp({
    data() {
      return {
         message:  'aa',
         checked: false,
         list: [],
         theme: '',
         selected: []
      }
    }
  }).mount('#app')
</script>

组件基础

网络异常，图片无法展示
| 

<div id="app">
  <font-size step="1" :val="fontSize" @plus="fontSize += $event"    
             @minus="fontSize -= $event"></font-size>
  <font-size step="3" :val="fontSize" @plus="fontSize += $event" 
             @minus="fontSize -= $event"></font-size>
  <p :style="{fontSize:fontSize+'px'}">Hello {{fontSize}}</p>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  const app = Vue.createApp({
    data() { return { fontSize: 18 } }
  })
  app.component('font-size', {
    props: ['val', 'step'],
    template: `
      <div>step: {{step}}
        <button @click="onPlus">+</button>
        <button @click="$emit('minus', step)">-</button>
      </div>`,
    methods: {
      onPlus() { this.$emit('plus', parseInt(this.step)) }
    }
  })
  app.mount('#app')
</script>

组件的v-model双向绑定

网络异常，图片无法展示
|

  • 父组件通过v-model="属性"把属性传递给子组件。
  • 子组件内有一个modelvalue的ProP,接收父组件传递的数据。
  • 子组件通过触发update:modelValue修改父组件绑定的属性
<div id="app">
  <font-size step="1" v-model="fontSize"></font-size>
  <font-size step="4" v-model="fontSize"></font-size>
  <p :style="{fontSize:fontSize+'px'}">Hello {{fontSize}}</p>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  const app = Vue.createApp({
    data() { return { fontSize: 16 } }
  })
  app.component('font-size', {
    props: ['modelValue', 'step'],
    template: `
      <div>step: {{modelValue}}
        <button @click="$emit('update:modelValue', +step+modelValue)">+</button>
        <button @click="$emit('update:modelValue', modelValue-step)">-</button>
      </div>`
  })
  app.mount('#app')
</script>

单向数据流

  • 什么是单向数据流？
    很多框架都使用单向数据流，指的是父组件能直接传递数据给子组件，子组件不能随意修改父组件状态。
  • 为什么要单向？
    单向数据流的目的是让数据的传递变得简单、可控、可追溯。假设都是用双向数据流，父组件维护一个状态，并且传递给所有的子组件。当其中一个子组件通过双向数据流直接修改父组件的这个状态时，其他子组件也会被修改。当这个结果产生时我们无法得知是拿个子组件修改了数据，在项目庞大时数据的管理和追湖变得更复杂。
  • 如果要双向如何实现？
    一般来说，父组件可用通过设置子组件的props直接传递数据给子组件。子组件想传递数据给父组件时，可以在内部mit一个自定义事件，父组件可在子组件上绑定该事件的监听，来处理子组件mit的事件和数据。 在Vue里，v-models实现的所谓双向绑定，本质上就这种方式。

小结

1、列表循环时key的作用？

  • 简单通俗地讲，没有key时，状态默认绑定的是位置，有key时，状态根据key的属性值绑定到了响应的数组元素。
  • key是为了更高效的更新虚拟DOM
  • 推荐使用数组内的字段（保证唯一性）作为key的唯一标识，不建议直接使用index 2、@click="handler"和@click="handler()"哪个正确？

3、父子组件如何传递数据？

4、单向数据流指的是什么？有什么好处？ 5、v-model是如何实现的

Vue3组件注册、Props、Attribute、自定义事件

组件注册

网络异常，图片无法展示
|
组件注册

Props

网络异常，图片无法展示
|

非Prop的属性

网络异常，图片无法展示
|

自定义事件

网络异常，图片无法展示
|

v-model语法糖

网络异常，图片无法展示
|

小结

  • 在Vue中组件的全局注册和局部注册有什么区别，如何局部注册组件?\
  • 如何传递一个字符串类型的prop给子组件?数字类型呢?如何动态给prop赋值?\
  • 对于组件来说非prop的attribute怎么处理?\
  • v-model:foo="bar”与:foo="bar"有什么区别?如何实现v-model:foo="bar” ?\
  • Vue中的插槽是什么?\
  • 如何实现多层级嵌套的父子组件数据传递?\
  • keep-alive有什么作用

插槽、具名插槽、作用域插槽

slot插槽

网络异常，图片无法展示
|

具名插槽

网络异常，图片无法展示
|

作用域插槽

网络异常，图片无法展示
|

keep-alive与生命周期

网络异常，图片无法展示
|

网络异常，图片无法展示
|

小结

  • Vue中的插槽是什么?
  • 具名插槽怎么用？
  • 作用域插槽是什么？

爷孙组件数据传递

Provide和Inject

网络异常，图片无法展示
|

网络异常，图片无法展示
|

过渡与动画

使用class切换实现过渡和动画

网络异常，图片无法展示
|

修改style实现过渡和动画

网络异常，图片无法展示
|

transition组件创建的class

网络异常，图片无法展示
|

transition组件和animate.css便捷实现特

多个元素轮流切换过渡实现

网络异常，图片无法展示
|

动态组件专场效果实现

网络异常，图片无法展示
|

transition-group

网络异常，图片无法展示
|

使用Vue CLI4搭建Vue项目

网络异常，图片无法展示
|

目录结构与执行流程

网络异常，图片无法展示
|

引入Sass解决各种bug

网络异常，图片无法展示
|

scoped

网络异常，图片无法展示
|

@vue:cli-service# @vue:cli-service

网络异常，图片无法展示
|

vue.config.js配置

网络异常，图片无法展示
|

webpack

网络异常，图片无法展示
|

Vite 搭建项目

vite是什么解决什么问题

网络异常，图片无法展示
|

诞生思路

网络异常，图片无法展示
|

vite体验

网络异常，图片无法展示
|

Composition API

选项式API的痛点

网络异常，图片无法展示
|

组合式API的优势和用法

网络异常，图片无法展示
|

用法

选项式API改造成组合式API

生命周期钩子概览

网络异常，图片无法展示
|

Setup、ref、reactive、toRef、toRefs用法详解

网络异常，图片无法展示
|

网络异常，图片无法展示
|

网络异常，图片无法展示
|

VueRouter

VueRouter4的安装

网络异常，图片无法展示
|

VueRouter4的使用

网络异常，图片无法展示
|

原生JS造一个Hash模式的Router

网络异常，图片无法展示
|

原生JS造一个History模式的Router

网络异常，图片无法展示
|

VueRouter4的Hash模式和History模式

网络异常，图片无法展示
|

动态路由与响应参数变化（路由匹配）

网络异常，图片无法展示
|

导航守卫

网络异常，图片无法展示
|

在组合式API中使用VueRouter

网络异常，图片无法展示
|

beforeRouteUpdate路由守卫的使用场景

路由懒加载

网络异常，图片无法展示
|

路由切换过渡动效

网络异常，图片无法展示
|

Vuex4.0的使用和原理

组件间数据传递的几种方法、为什么需要Vuex

网络异常，图片无法展示
|

EventBus的不便之处

网络异常，图片无法展示
|

文章标签：
JavaScript
前端开发
网络架构
API
Serverless
缓存
小調不吃辣
目录
相关文章
光明顶阳顶天
|
2月前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
在使用`v-model`处理自定义组件双向数据绑定时，要仔细考虑各种因素，确保数据的准确传递和更新，同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循，能够更好地发挥`v-model`的优势，实现高效的双向数据绑定效果。
光明顶阳顶天
143 64
光明顶阳顶天
|
2月前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么？
总的来说，Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进，使其更适应现代前端开发的需求和趋势。但需要注意的是，在迁移过程中可能需要对一些代码进行调整和适配。
光明顶阳顶天
115 60
蓝易云
|
10天前
|
JavaScript API 数据处理
vue3使用pinia中的actions，需要调用接口的话
通过上述步骤，您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store，都能轻松实现高效的状态管理和数据处理。
蓝易云
39 3
mao29955
|
2月前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时，如何避免循环引用？
Web 组件化是一种有效的开发方法，可以提高项目的质量、效率和可维护性。在实际项目中，要结合项目的具体情况，合理应用 Web 组件化的理念和技术，实现项目的成功实施和交付。通过不断地探索和实践，将 Web 组件化的优势充分发挥出来，为前端开发领域的发展做出贡献。
mao29955
39 8
mao29955
|
2月前
|
存储 JavaScript 数据管理
除了provide/inject，Vue3中还有哪些方式可以避免v-model的循环引用？
需要注意的是，在实际开发中，应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时，要综合考虑代码的可读性、可维护性和性能等因素，以确保系统的稳定和高效运行。
mao29955
33 1
mao29955
|
2月前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性，在处理一些复杂的组件间通信问题时，可以提供一种灵活的解决方案。通过合理使用它们，可以帮助我们更好地避免`v-model`的循环引用问题，提高代码的质量和可维护性。
mao29955
42 1
光明顶阳顶天
|
2月前
|
JavaScript
在 Vue 3 中，如何使用 v-model 来处理自定义组件的双向数据绑定？
需要注意的是，在实际开发中，根据具体的业务需求和组件设计，可能需要对上述步骤进行适当的调整和优化，以确保双向数据绑定的正确性和稳定性。同时，深入理解 Vue 3 的响应式机制和组件通信原理，将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
光明顶阳顶天
53 2
快乐就是哈哈哈
|
2月前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
快乐就是哈哈哈
69 3
vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
html的七十二变
|
2月前
|
JavaScript 索引
Vue 3.x 版本中双向数据绑定的底层实现有哪些变化
从Vue 2.x的`Object.defineProperty`到Vue 3.x的`Proxy`，实现了更高效的数据劫持与响应式处理。`Proxy`不仅能够代理整个对象，动态响应属性的增删，还优化了嵌套对象的处理和依赖追踪，减少了不必要的视图更新，提升了性能。同时，Vue 3.x对数组的响应式处理也更加灵活，简化了开发流程。
html的七十二变
49 3
CamilleKing
|
2月前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能，解决了Vue 2中响应式系统的一些局限性，同时在性能方面也有一定的提升，为开发者提供了更好的开发体验和性能保障。
CamilleKing
80 7

热门文章

最新文章

  • 1
    Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
  • 2
    Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么？
  • 3
    基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
  • 4
    在 Vue 3 中，如何使用 v-model 来处理自定义组件的双向数据绑定？
  • 5
    Vue3中使用provide/inject来避免v-model的循环引用
  • 6
    Vue3中v-model在处理自定义组件双向数据绑定时，如何避免循环引用？
  • 7
    除了provide/inject，Vue3中还有哪些方式可以避免v-model的循环引用？
  • 8
    vue3使用pinia中的actions，需要调用接口的话
  • 9
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 10
    Vue3解析markdown解析并实现代码高亮显示
  • 1
    使用Vue.js构建交互式前端的技术探索
    93
  • 2
    ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
    171
  • 3
    vue2升级到vue3的一些使用注意事项记录(四）
    140
  • 4
    ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
    156
  • 5
    ruoyi-nbcio-plus基于vue3的flowable多租户机制
    206
  • 6
    ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改
    118
  • 7
    vue3中使用动态组件
    115
  • 8
    Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
    148
  • 9
    ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
    78
  • 10
    ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
    128

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门教程开发文档
  • React 入门与实战
  • jQuery开发教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 23-Vue.js在前端...1506518547.pdf
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月