При создании данные в data и prop доступны.
Вычисляемое свойство при использовании в mount или dom будет выполнять код свойства.
Последний отключен, можно использовать предыдущие данные, а dom можно манипулировать только в это время.
Часы больше не будут автоматически выполняться на этапе создания, за исключением добавления элемента конфигурации немедленного выполнения.
Порядок загрузки:
В официальной документации подчеркнуты два наиболее важных момента, отличающих вычисляемый от метода.
- вычисленный — это вызов свойства, а методы — вызов функции.
- вычисленный поставляется с кэшированием, а методы - нет.
Вычисляемые свойства кэшируются на основе их зависимостей и переоцениваются только при изменении связанных с ними зависимостей.
let vm = new Vue({
el: '#app',
data: {
message: '我是消息，'
},
methods: {
methodTest() {
return this.message + '现在我用的是methods'
}
},
computed: {
computedTest() {
return this.message + '现在我用的是computed'
}
}
})
Это означает, что до тех пор, пока сообщение не изменилось, многократный доступ к вычисляемому свойству calculatedTest немедленно вернет предыдущий результат вычисления без необходимости повторного выполнения функции.
Напротив, до тех пор, пока возникновение переработки, вызов метода всегда будет выполнять эту функцию.
<div id="app">
<h1>{{message}}</h1>
<p class="test1">{{methodTest}}</p>
<p class="test2-1">{{methodTest()}}</p>
<p class="test2-2">{{methodTest()}}</p>
<p class="test2-3">{{methodTest()}}</p>
<p class="test3-1">{{computedTest}}</p>
<p class="test3-2">{{computedTest}}</p>
</div>
в интерполяции HTML
- Метод, определенный вычисляемым, вызывается в форме доступа к свойству, {{computedTest}}
- Однако для метода, определяемого методами, мы должны добавить () к вызову, например {{methodTest()}}, иначе представление будет выглядеть как test1, см. рисунок ниже
вычислительные возможности кэширования
В приведенном выше примере доступ к методам, определенным с помощью методов, осуществляется в виде вызовов функций, затем test2-1, test2-2 и test2-3 многократно запускают метод methodTest три раза.Если мы сталкиваемся со сценарием, 1000 возвращаемых значений of methodTest требуются, поэтому нет сомнений, что это приведет к большому количеству отходов Хуже того, если вы измените значение message, каждый из 1000 методов methodTest будет пересчитан заново. . . .
Поэтому в официальной документации неоднократно подчеркивается, что для любой сложной логики следует использовать вычисляемые свойства
вычисленный зависит от данных в данных и будет переоценен только при изменении связанных с ним зависимых данных.
let vm = new Vue({
el: '#app',
data: {
message: '我是消息，'
},
methods: {
methodTest() {
return this.message + '现在我用的是methods'
}
},
computed: {
computedTest() {
return this.message + '现在我用的是computed'
}
}
})
Как и в приведенном выше примере, когда создается экземпляр Vue, вычисляемый метод, определенный в вычислении, выполняет вычисление и возвращает значение.При последующем написании кода до тех пор, пока не изменятся данные сообщения, от которых зависит метод ComputedTest, метод ComputedTest не будет пересчитан., то есть test3-1, test3-2 получают возвращаемое значение напрямую, а не результат пересчета методом calculatedTest.
Преимущества этого также очевидны.Также, если мы столкнемся со сценарием, который требует возвращаемого значения 1000 вычисленных тестов, нет сомнений, что это значительно сэкономит память по сравнению с методами. Даже если вы измените значение сообщения, calculatedTest вычислит его только один раз.
Другие примечания к вычисляемым
- На самом деле, к вычислению можно обращаться и как к свойству, и как к методу.
- Важной причиной происхождения вычисляемого является предотвращение чрезмерной логики в текстовой интерполяции, которая затрудняет поддержку.
вычислил и смотри
Vue предоставляет более общий способ наблюдения за изменениями данных в экземплярах Vue и реагирования на них: свойство watch, которое используется в сценариях маршрутизации: router for vue learning
Когда у вас есть некоторые данные, которые необходимо изменить с другими данными, легко злоупотребить наблюдением, лучшая идея — использовать вычисляемые свойства вместо императивных обратных вызовов наблюдения:
<div id="demo">{{ fullName }}</div>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
Приведенный выше код является императивным и повторяющимся. Сравните его с версией вычисляемого свойства:
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
Watch уместно, когда вам нужно выполнять асинхронные или дорогостоящие операции при изменении данных.
Вкратце: попробуйте использовать вычисляемые свойства для мониторинга изменения данных, потому что в нем самой есть эта фича, а вычисляемого «автомата» с часами нет, а ручные настройки усложняют код.
На каком этапе жизненного цикла выполняется Vue?
1. Во время new Vue(), _init() в vue\src\core\instance\index.js инициализирует каждую функцию
function Vue (options) {
if (process.env.NODE_ENV !== 'production' &&
!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the `new` keyword')
}
this._init(options) //初始化各个功能
}
2. В _init() есть такой порядок выполнения: где initState() находится между beforeCreate и created
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm) //初始化
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
3. Сделайте следующие вещи в initState():
if (opts.props) initProps(vm, opts.props)//初始化Props
if (opts.methods) initMethods(vm, opts.methods)//初始化methods
if (opts.data) {
initData(vm)} else {
observe(vm._data = {}, true /* asRootData */)}//初始化data
if (opts.computed) initComputed(vm, opts.computed)//初始化computed
4. Таким образом, инициализация Props, методов, данных и вычислений выполняется между beforeCreated и created.