alternative approach - dont init observer if data has not changed

src/generators/dom/visitors/Component/Binding.js

@@ -1,6 +1,6 @@
 import deindent from '../../../../utils/deindent.js';
 import flattenReference from '../../../../utils/flattenReference.js';
-import getSetter from '../shared/binding/getSetter.js';
+import getSetter, { getTailSnippet } from '../shared/binding/getSetter.js';
 
 export default function visitBinding ( generator, block, state, node, attribute, local ) {
 	const { name, keypath } = flattenReference( attribute.value );
@@ -41,6 +41,8 @@ export default function visitBinding ( generator, block, state, node, attribute,
 
 	const updating = block.getUniqueName( `${local.name}_updating` );
 
+	const initialValue = getInitialValue({ block, local, attribute, name });
+
 	local.create.addBlock( deindent`
 		var ${updating} = false;
 
@@ -51,7 +53,7 @@ export default function visitBinding ( generator, block, state, node, attribute,
 				${updating} = true;
 				${setter}
 				${updating} = false;
-			});
+			}, { init: ${generator.helper( 'differs' )}( ${local.name}.get( '${attribute.name}' ), ${initialValue} ) });
 		});
 	` );
 
@@ -62,4 +64,19 @@ export default function visitBinding ( generator, block, state, node, attribute,
 			${updating} = false;
 		}
 	` );
+}
+
+function getInitialValue ({ block, local, attribute, name }) {
+	const tail = attribute.value.type === 'MemberExpression' ? getTailSnippet( attribute.value ) : '';
+
+	if ( block.contexts.has( name ) ) {
+		// const prop = dependencies[0];
+
+		const list = `${local.name}._context.${block.listNames.get( name )}`;
+		const index = `${local.name}._context.${block.indexNames.get( name )}`;
+
+		return `${list}[${index}]${tail}`;
+	}
+
+	return `${block.component}.get( '${name}' )${tail}`;
 }

src/generators/dom/visitors/shared/binding/getSetter.js

@@ -1,6 +1,6 @@
 import deindent from '../../../../../utils/deindent.js';
 
-export default function getSetter ({ generator, block, name, keypath, context, attribute, dependencies, value }) {
+export default function getSetter ({ block, name, keypath, context, attribute, dependencies, value }) {
 	if ( block.contexts.has( name ) ) {
 		const prop = dependencies[0];
 		const tail = attribute.value.type === 'MemberExpression' ? getTailSnippet( attribute.value ) : '';
@@ -8,33 +8,24 @@ export default function getSetter ({ generator, block, name, keypath, context, a
 		return deindent`
 			var list = this.${context}.${block.listNames.get( name )};
 			var index = this.${context}.${block.indexNames.get( name )};
+			list[index]${tail} = ${value};
 
-			if ( ${generator.helper( 'differs' )}( ${value}, list[index]${tail} ) ) {
-				list[index]${tail} = ${value};
-				${block.component}._set({ ${prop}: ${block.component}.get( '${prop}' ) });
-			}
+			${block.component}._set({ ${prop}: ${block.component}.get( '${prop}' ) });
 		`;
 	}
 
 	if ( attribute.value.type === 'MemberExpression' ) {
 		return deindent`
 			var ${name} = ${block.component}.get( '${name}' );
-			if ( ${generator.helper( 'differs' )}( ${value}, ${keypath} ) ) {
-				${keypath} = ${value};
-				${block.component}._set({ ${name}: ${name} });
-			}
+			${keypath} = ${value};
+			${block.component}._set({ ${name}: ${name} });
 		`;
 	}
 
-	return deindent`
-		var ${name} = ${block.component}.get( '${name}' );
-		if ( ${generator.helper( 'differs' )}( ${value}, ${name} ) ) {
-			${block.component}._set({ ${name}: ${value} });
-		}
-	`;
+	return `${block.component}._set({ ${name}: ${value} });`;
 }
 
-function getTailSnippet ( node ) {
+export function getTailSnippet ( node ) {
 	const end = node.end;
 	while ( node.type === 'MemberExpression' ) node = node.object;
 	const start = node.end;