您现在的位置是：首页 >学无止境 >vue2实例网站首页学无止境

vue2实例

小白村第一深情 2024-07-01 11:59:40
简介vue2实例

目录

数据与方法

你提到vue有两种数据和方法，js是不是只有一种

vue2自带的实例和方法

vue2$会和jQuery冲突d的问题

vue2中被人吐槽的this（vue3已改进）

箭头函数和普通函数中的this

生命周期

数据与方法

没看懂，好像是讲在什么情况下·双向绑定会失效

问了下ai，大体说vue有两种类型数据和·方法（一个数据一个方法了属于是?）

{{message}}和v-on+对应函数

关键之一this的作用域（详细见下）

关键之二是vue2自带常用方法，细节区分自带$和用户自定义(我怎么记得有一篇是讲这个和jq的事？)

你提到vue有两种数据和方法，js是不是只有一种

是的,在 JavaScript 中,数据和方法都是属性和函数。Vue 中将它们分成两种类型主要是为了响应式系统。在 Vue 中:- 数据通过 data 选项定义,Vue 会对这些数据 property 进行响应式转换,当数据变化时视图会自动更新。 - 方法通过 methods 选项定义,这些函数不会自动绑定 this。在组件的方法中,this 默认指向 Vue 实例/组件。相比之下,在普通 JavaScript 中:- 数据和方法都是定义在对象上的 property 和 function - 数据的变化不会自动更新视图 - 方法中的 this 需要手动绑定,否则其默认值是 undefined例如:Vue 中:

js
data: {
  msg: 'Hello'
},
methods: {
  greet() {
    console.log(this.msg) // Hello
  }
}

JavaScript 中:

js
let obj = {
  msg: 'Hello',
  greet() {
    console.log(this.msg) // undefined
  }
}
obj.greet() // this is undefined
​
let obj = {
  msg: 'Hello',
  greet: function() {
    console.log(this.msg) // Hello
  }.bind(obj) 
}

我们需要通过 .bind(obj) 手动绑定 this,让 greet 方法中的 this 指向 obj 对象。所以总体来说,Vue 通过 data 和 methods 等选项,在语法糖的基础上实现了响应式和组件化,这是它与普通 JavaScript 之间的主要区别。

vue2自带的实例和方法

Vue 实例自带的属性和方法有:### 数据- data : 定义响应式数据### 方法- methods : 定义方法 - computed : 定义计算属性 - watch : 监听数据变化### 生命周期钩子- beforeCreate - created - beforeMount - mounted - beforeUpdate - updated - beforeDestroy - destroyed### 实例属性- $data : 组件数据 - $el : 组件元素节点 - $options : 组件选项对象 - $parent : 父级实例 - $root : 根实例 - $children : 直接子组件 - $slots : 插槽内容对象 - $scopedSlots : 作用域插槽内容对象 - $refs : 组件引用对象 - $isServer : 是否在 server 端渲染 - $props : props 对象 - $emit : 触发事件 - $attrs : 父作用域的不被 props 认可的属性绑定对象 - $listeners : 父作用域在组件上的事件监听器### 实例方法- vm.$watch(data,callback) : 监听数据变化 - vm.$set(target, key, value) : 给响应式对象添加一个 property - vm.$delete(target, key) : 删除 property - vm.$emit(eventName) : 触发事件 - vm.$mount(elementOrSelector) : 如果实例渲染的元素上没有定义 el 选项,就会被 hydrating 为 undefined,可以使用 vm.$mount() 挂载元素。 - vm.$forceUpdate() : 更新实例 - vm.$nextTick(callback) : 在下次 DOM 更新循环结束之后执行延迟回调。 - vm.$destroy() : 完成组件生命周期,解除事件监听, 子元素和指令的绑定。这些属性和方法都可以在 Vue 实例上访问,帮助我们开发 Vue 应用。

vue2$会和jQuery冲突d的问题

属性和方法可能与其他库(如 jQuery)产生冲突。当 Vue 检测到 jQuery 存在时,它会自动将 $ 挂载到 jQuery 上,以避免冲突。这意味着在 Vue 实例上访问 $ 时,它将指向 jQuery,而不是 Vue 自身的属性。在这种情况下,你有两种选择:1. 使用完整名字访问 Vue 的属性和方法,如 this.$data 变为 this.$root.$data。2. 重新分配 $ 到 Vue,如:

js
var vm = new Vue({
  // ...
})
vm.$ = Vue

然后 $ 可以继续在 Vue 实例上使用,不会指向 jQuery。当然,最好的方式是在项目中只选择使用 Vue 或 jQuery 中的一个。如果必须共用,通过命名空间或范围分隔它们是一个不错的方案,如:

html
<div id="app">
  <vue-cmp></vue-cmp>
</div>
​
<script> 
// Vue 
var vm = new Vue({
  el: '#app',
  // ...
})
​
// jQuery 在另一个范围使用
;(function ($) {
  $(someElement).doSomething() 
})(jQuery)
</script>

这样 jQuery 的 $ 只在函数作用域内生效,不会影响 Vue。通过这些措施,可以尽量避免 Vue 和 jQuery 之间的冲突,如果实在需要在同一范围使用,手动绑定 $ 到某一方是解决命名冲突的方式。

vue2中被人吐槽的this（vue3已改进）

Vue 2 中的 this 机制被一些人吐槽过,主要有以下几个原因:1. 在组件的方法中,this 默认指向组件实例,需要通过 that 或者箭头函数绑定 this 才能指向外部的数据或方法。这和 React 的 this 机制有差异, React 中方法中的 this 总是指向绑定它的对象。例如在 Vue 中:

js
data: {
  foo: true 
},
methods: {
  bar () {
    setTimeout(() => {
      console.log(this.foo) // true, 通过箭头函数绑定
    }, 100)
  }
}

如果不使用箭头函数,this.foo 将是 undefined。而在 React 中,this 总是指向绑定的组件:

jsx
class Foo extends React.Component {
  bar () {
    setTimeout(() => {
      console.log(this.props.foo) // 不需要绑定
    }, 100)
  }
}

  1. 在组件的生命周期钩子和 watcher 中,this 也默认指向组件实例,需要使用 vm 这样的变量来保存 this。例如:

js
data: {
  foo: true
},
mounted () {
  var vm = this
  setTimeout(() => {
    console.log(vm.foo) // 通过 vm 访问
  }, 100) 
}

  1. 在混入(mixins)或者继承的子组件中,this 会发生变化,这需要开发者事先了解 Vue 的 this 规则,否则很容易出错。所以总体来说,Vue 2 的 this 机制相比 React 的确稍显复杂,这也是 Vue 3 对其做出改进的原因之一。在 Vue 3 中,方法中的 this 将默认指向绑定的组件实例,从而与用户的直觉以及其他框架更加一致。但如果已经了解并掌握 Vue 2 的 this 规则,它依然是一套完全可靠和高效的机制。我们只需要按照规则 correctly 在合适的地方绑定 this 或者使用 vm 这样的变量保存即可

箭头函数和普通函数中的this

箭头函数没有this是吗？

这种说法不完全正确。箭头函数确实有 this,但是这个 this 的指向与普通函数不同。在箭头函数中,this 指向的是函数定义时的上下文,而不是执行时的上下文。简单来说,就是 this 永远指向定义箭头函数的上下文。例如:

js
var obj = {
  name: 'obj',
  test: () => {
    console.log(this.name)
  }
}
obj.test() // obj

这里 this 指向的是 obj 对象,因为箭头函数在 obj 对象的作用域中定义。而如果使用普通函数,this 则指向执行时的上下文 - obj:

js
var obj = {
  name: 'obj', 
  test: function() {
    console.log(this.name)
  }
}
obj.test() // obj

当然,如果你取出该方法单独调用,this 将指向 undefined:

js
var obj = {
  name: 'obj', 
  test: function() {
    console.log(this.name)
  }
}
var test = obj.test
test() // undefined

而对于箭头函数,由于 this 已经绑定到 obj, 即使单独调用,它仍然会指向 obj:

js
var obj = {
  name: 'obj',
  test: () => {
    console.log(this.name)
  }  
}
var test = obj.test 
test() // obj

所以总结来说:- 普通函数中的 this 指向调用函数的对象 - 箭头函数中的 this 指向定义函数的上下文箭头函数通过让 this 与定义上下文绑定,避免了在一些场景下显式绑定 this 的麻烦。但这也带来了无法根据调用来改变 this 指向的限制。所以正确的说法是:箭头函数的 this 与普通函数的 this 指向不同,而不是“箭头函数没有 this”。我希望通过这些例子,帮助你彻底理解箭头函数与普通函数的 this 机制的不同之处。

生命周期

。。。

Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染→更新→渲染、卸载等一系列过程。在这个过程中,Vue 为我们提供了一些生命周期钩子函数,让我们在一定的阶段能够执行我们定义的代码。

生命周期钩子简单分为:- 创建期间的生命周期钩子:beforeCreate、created、beforeMount、mounted - 运行期间的生命周期钩子:beforeUpdate、updated、activated、deactivated、beforeDestroy、destroyed具体的生命周期过程是:

  1. beforeCreate:在实例初始化之后被调用。此时,data 和 events 还未初始化。

  2. created:在实例创建完成后被立即调用。此时,data 和 events 已经创建,this 关键字也已经指向当前的 Vue 实例。

    1. beforeMount:在挂载开始之前被调用。相关的 render 函数首次被调用

      1. mounted:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。此时,Vue 实例已经替换掉挂载元素,这意味着你可以访问并探索其 dom 元素和子组件了。

        1. beforeUpdate:数据更新时调用,发生在虚拟 DOM 打补丁之前。此时,拥有新的 this.user,但 $el 还是旧的。

          1. updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。此时,组件 DOM 将已经更新,所以可以执行依赖于 DOM 的操作。

            1. beforeDestroy:实例销毁之前调用。此时实例仍然完全可用。

              1. destroyed:Vue 实例销毁后调用。该钩子被调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。所以总结来说,通过这些生命周期函数,可以在 Vue 实例生命周期的不同阶段执行相关业务逻辑,利用好这些钩子函数可以大大提高我们的开发效率。

风语者！平时喜欢研究各种技术，目前在从事后端开发工作，热爱生活、热爱工作。

站长推荐